#419 Image field

Gruntfile.js

@@ -32,6 +32,31 @@ module.exports = function( grunt ) {
 					'assets/js/src/wpum-stripe.js'
 				],
 				dest: 'assets/js/wpum-stripe.js'
+			},
+			// Combine all filepond related scripts into a single file
+			filepond_scripts: {
+				src: [
+					'assets/js/vendor/filepond/filepond.min.js',
+					'assets/js/vendor/filepond/filepond.jquery.js',
+					'assets/js/vendor/filepond/filepond-plugin-file-validate-type.min.js',
+					'assets/js/vendor/filepond/filepond-plugin-file-validate-size.min.js',
+					'assets/js/vendor/filepond/filepond-plugin-image-preview.min.js'
+				],
+				dest: 'assets/js/vendor/filepond-bundle.js'
+			},
+			// Combine all filepond related styles into a single file
+			filepond_styles: {
+				src: [
+					'assets/css/vendor/filepond/filepond.min.css',
+					'assets/css/vendor/filepond/filepond-plugin-image-preview.min.css'
+				],
+				dest: 'assets/css/vendor/filepond.css'
+			},
+			wpum_filepond: {
+				src: [
+					'assets/js/src/wpum-filepond.js'
+				],
+				dest: 'assets/js/wpum-filepond.js'
 			}
 		},
 		shell: {
@@ -76,7 +101,9 @@ module.exports = function( grunt ) {
 					'assets/js/admin/admin-menus.min.js': ['assets/js/src/admin/admin-menus.js'],
 					'assets/js/wp-user-manager.min.js': ['assets/js/src/wp-user-manager.js'],
 					'assets/js/wpum-directories.min.js': ['assets/js/src/wpum-directories.js'],
-					'assets/js/wpum-stripe.min.js': ['assets/js/src/wpum-stripe.js']
+					'assets/js/wpum-stripe.min.js': ['assets/js/src/wpum-stripe.js'],
+					'assets/js/wpum-filepond.min.js': ['assets/js/src/wpum-filepond.js'],
+					'assets/js/vendor/filepond-bundle.min.js': ['assets/js/vendor/filepond-bundle.js']
 				},
 				options: {
 					banner: '/*! <%= pkg.title %> - v<%= pkg.version %>\n' +

assets/js/src/wpum-filepond.js

@@ -0,0 +1,100 @@
+(function ($) {
+	'use strict';
+
+	const imageFields = 'input.wpum-image-field[type="file"]';
+
+	/**
+	 * Convert pipe-separated extensions to FilePond accepted types.
+	 * Example: "jpg|png|webp" -> [".jpg", ".png", ".webp"]
+	 */
+	function parseFileTypes(types) {
+		if (!types) {
+			return ['image/*'];
+		}
+
+		var result = [];
+
+		types.split('|').forEach(function (type) {
+			type = type.trim().toLowerCase();
+
+			if (!type) {
+				return;
+			}
+
+			if (type.indexOf('/') !== -1) {
+				result.push(type);
+			} else {
+				result.push('image/' + type);
+			}
+		});
+
+		return result;
+	}
+
+	/**
+	 * Initialize FilePond on matching inputs.
+	 */
+	function initImageFields() {
+		if (typeof $.fn.filepond !== 'function') {
+			// FilePond jQuery adapter is not loaded.
+			return;
+		}
+
+		if (typeof FilePond === 'undefined') {
+			// Core FilePond is not loaded.
+			return;
+		}
+
+		// Register only the plugins that are available.
+		var plugins = [
+			window.FilePondPluginImagePreview,
+			window.FilePondPluginFileValidateType,
+			window.FilePondPluginFileValidateSize
+		].filter(function (plugin) {
+			return !!plugin;
+		});
+
+		if (plugins.length) {
+			FilePond.registerPlugin.apply(FilePond, plugins);
+		}
+
+		$(imageFields).each(function () {
+			const $input = $(this);
+
+			// Prevent double initialization.
+			if ($input.hasClass('filepond--root')) {
+				return;
+			}
+
+			const fileTypes = parseFileTypes($input.data('file_types'));
+			const wrapper = $input.closest('fieldset');
+			const fileUrl = $(wrapper).find('input[name="' + 'current_' + $input.attr('name') + '"]').val();
+
+			$input.filepond({
+				acceptedFileTypes: fileTypes,
+				allowFileSizeValidation: true,
+				allowFileTypeValidation: true,
+				allowImagePreview: true,
+				allowMultiple: false,
+				credits: false,
+				maxFileSize: $input.data('file_size'),
+				required: $input.prop('required'),
+				storeAsFile: true,
+
+				// Remove the current image when it is removed from the FilePond UI.
+				onremovefile: function () {
+					$(wrapper).find('.wpum-uploaded-image').html('');
+				}
+			});
+
+			// Set existing file.
+			if (fileUrl) {
+				$input.filepond('addFile', fileUrl);
+			}
+		});
+	}
+
+	$(document).ready(function () {
+		initImageFields();
+	});
+})(jQuery);

assets/js/vendor/filepond/filepond.jquery.js

@@ -0,0 +1,104 @@
+(function($, FilePond){
+    'use strict';
+
+    // No jQuery No Go
+    if (!$ || !FilePond) {
+        return;
+    }
+
+    // Test if FilePond is supported
+    if (!FilePond.supported()) {
+        // add stub
+        $.fn.filepond = function() {};
+        return;
+    }
+
+    // Helpers
+    function argsToArray(args) {
+        return Array.prototype.slice.call(args);
+    }
+
+    function isFactory(args) {
+        return !args.length || typeof args[0] === 'object';
+    }
+
+	function isGetter(obj, key) {
+		var descriptor = Object.getOwnPropertyDescriptor(obj, key);
+		return descriptor ? typeof descriptor.get !== 'undefined' : false;
+	}
+
+	function isSetter(obj, key) {
+		var descriptor = Object.getOwnPropertyDescriptor(obj, key);
+		return descriptor ? typeof descriptor.set !== 'undefined' : false;
+	}
+
+	function isMethod(obj, key) {
+		return typeof obj[key] === 'function';
+	}
+
+    // Setup plugin
+    $.fn.filepond = function() {
+
+        // get arguments as array
+        var args = argsToArray(arguments);
+
+        // method results array
+        var results = [];
+
+        // Execute for every item in the list
+        var items = this.each(function() {
+
+            // test if is create call
+            if (isFactory(args)) {
+                FilePond.create(this, args[0])
+                return;
+            }
+
+            // get a reference to the pond instance based on the element
+            var pond = FilePond.find(this);
+
+            // if no pond found, exit here
+            if (!pond) {
+                return;
+            }
+
+            // get property name or method name
+            var key = args[0];
+
+            // get params to pass
+            var params = args.concat().slice(1);
+
+            // run method
+            if (isMethod(pond, key)) {
+                results.push(pond[key].apply(pond, params));
+                return;
+            }
+
+            // set setter
+            if (isSetter(pond, key) && params.length) {
+                pond[key] = params[0];
+                return;
+            }
+
+            // get getter
+            if (isGetter(pond, key)) {
+                results.push(pond[key]);
+                return;
+            }
+
+            console.warn('$().filepond("' + key + '") is an unknown property or method.');
+        });
+
+        // returns a jQuery object if no results returned
+        return results.length ? this.length === 1 ? results[0] : results : items;
+    };
+
+    // Static API
+    Object.keys(FilePond).forEach(function(key) {
+        $.fn.filepond[key] = FilePond[key];
+    });
+
+    // Redirect setDefaults to setOptions
+    $.fn.filepond.setDefaults = FilePond.setOptions;
+
+}(jQuery, FilePond));

assets/js/wpum-filepond.js

@@ -0,0 +1,103 @@
+/*! WP User Manager - v2.9.13
+ * https://wpusermanager.com
+ * Copyright (c) 2026; * Licensed GPLv2+ */
+(function ($) {
+	'use strict';
+
+	const imageFields = 'input.wpum-image-field[type="file"]';
+
+	/**
+	 * Convert pipe-separated extensions to FilePond accepted types.
+	 * Example: "jpg|png|webp" -> [".jpg", ".png", ".webp"]
+	 */
+	function parseFileTypes(types) {
+		if (!types) {
+			return ['image/*'];
+		}
+
+		var result = [];
+
+		types.split('|').forEach(function (type) {
+			type = type.trim().toLowerCase();
+
+			if (!type) {
+				return;
+			}
+
+			if (type.indexOf('/') !== -1) {
+				result.push(type);
+			} else {
+				result.push('image/' + type);
+			}
+		});
+
+		return result;
+	}
+
+	/**
+	 * Initialize FilePond on matching inputs.
+	 */
+	function initImageFields() {
+		if (typeof $.fn.filepond !== 'function') {
+			// FilePond jQuery adapter is not loaded.
+			return;
+		}
+
+		if (typeof FilePond === 'undefined') {
+			// Core FilePond is not loaded.
+			return;
+		}
+
+		// Register only the plugins that are available.
+		var plugins = [
+			window.FilePondPluginImagePreview,
+			window.FilePondPluginFileValidateType,
+			window.FilePondPluginFileValidateSize
+		].filter(function (plugin) {
+			return !!plugin;
+		});
+
+		if (plugins.length) {
+			FilePond.registerPlugin.apply(FilePond, plugins);
+		}
+
+		$(imageFields).each(function () {
+			const $input = $(this);
+
+			// Prevent double initialization.
+			if ($input.hasClass('filepond--root')) {
+				return;
+			}
+
+			const fileTypes = parseFileTypes($input.data('file_types'));
+			const wrapper = $input.closest('fieldset');
+			const fileUrl = $(wrapper).find('input[name="' + 'current_' + $input.attr('name') + '"]').val();
+
+			$input.filepond({
+				acceptedFileTypes: fileTypes,
+				allowFileSizeValidation: true,
+				allowFileTypeValidation: true,
+				allowImagePreview: true,
+				allowMultiple: false,
+				credits: false,
+				maxFileSize: $input.data('file_size'),
+				required: $input.prop('required'),
+				storeAsFile: true,
+
+				// Remove the current image when it is removed from the FilePond UI.
+				onremovefile: function () {
+					$(wrapper).find('.wpum-uploaded-image').html('');
+				}
+			});
+
+			// Set existing file.
+			if (fileUrl) {
+				$input.filepond('addFile', fileUrl);
+			}
+		});
+	}
+
+	$(document).ready(function () {
+		initImageFields();
+	});
+})(jQuery);