#3509 Integrate Filepond uploader

inc/js/classes/BxDolUploader.js

@@ -289,6 +289,127 @@ BxDolUploaderSimple.prototype._loading = function (bShowProgress, bShowForm) {
     bx_loading($('#' + this._sFormContainerId + ' .bx-uploader-loading').get(0), bShowProgress);
 }
 
+BxDolUploaderSimple.prototype.getMimeTypefromString  = function (ext) {
+    var mimeTypes = 
+    {
+      'a'      : 'application/octet-stream',
+      'ai'     : 'application/postscript',
+      'aif'    : 'audio/x-aiff',
+      'aifc'   : 'audio/x-aiff',
+      'aiff'   : 'audio/x-aiff',
+      'au'     : 'audio/basic',
+      'avi'    : 'video/x-msvideo',
+      'bat'    : 'text/plain',
+      'bin'    : 'application/octet-stream',
+      'bmp'    : 'image/x-ms-bmp',
+      'c'      : 'text/plain',
+      'cdf'    : 'application/x-cdf',
+      'csh'    : 'application/x-csh',
+      'css'    : 'text/css',
+      'dll'    : 'application/octet-stream',
+      'doc'    : 'application/msword',
+      'dot'    : 'application/msword',
+      'dvi'    : 'application/x-dvi',
+      'eml'    : 'message/rfc822',
+      'eps'    : 'application/postscript',
+      'etx'    : 'text/x-setext',
+      'exe'    : 'application/octet-stream',
+      'gif'    : 'image/gif',
+      'gtar'   : 'application/x-gtar',
+      'h'      : 'text/plain',
+      'hdf'    : 'application/x-hdf',
+      'htm'    : 'text/html',
+      'html'   : 'text/html',
+      'jpe'    : 'image/jpeg',
+      'jpeg'   : 'image/jpeg',
+      'jpg'    : 'image/jpeg',
+      'js'     : 'application/x-javascript',
+      'ksh'    : 'text/plain',
+      'latex'  : 'application/x-latex',
+      'm1v'    : 'video/mpeg',
+      'man'    : 'application/x-troff-man',
+      'me'     : 'application/x-troff-me',
+      'mht'    : 'message/rfc822',
+      'mhtml'  : 'message/rfc822',
+      'mif'    : 'application/x-mif',
+      'mov'    : 'video/quicktime',
+      'movie'  : 'video/x-sgi-movie',
+      'mp2'    : 'audio/mpeg',
+      'mp3'    : 'audio/mpeg',
+      'mp4'    : 'video/mp4',
+      'mpa'    : 'video/mpeg',
+      'mpe'    : 'video/mpeg',
+      'mpeg'   : 'video/mpeg',
+      'mpg'    : 'video/mpeg',
+      'ms'     : 'application/x-troff-ms',
+      'nc'     : 'application/x-netcdf',
+      'nws'    : 'message/rfc822',
+      'o'      : 'application/octet-stream',
+      'obj'    : 'application/octet-stream',
+      'oda'    : 'application/oda',
+      'pbm'    : 'image/x-portable-bitmap',
+      'pdf'    : 'application/pdf',
+      'pfx'    : 'application/x-pkcs12',
+      'pgm'    : 'image/x-portable-graymap',
+      'png'    : 'image/png',
+      'pnm'    : 'image/x-portable-anymap',
+      'pot'    : 'application/vnd.ms-powerpoint',
+      'ppa'    : 'application/vnd.ms-powerpoint',
+      'ppm'    : 'image/x-portable-pixmap',
+      'pps'    : 'application/vnd.ms-powerpoint',
+      'ppt'    : 'application/vnd.ms-powerpoint',
+      'pptx'   : 'application/vnd.ms-powerpoint',
+      'ps'     : 'application/postscript',
+      'pwz'    : 'application/vnd.ms-powerpoint',
+      'py'     : 'text/x-python',
+      'pyc'    : 'application/x-python-code',
+      'pyo'    : 'application/x-python-code',
+      'qt'     : 'video/quicktime',
+      'ra'     : 'audio/x-pn-realaudio',
+      'ram'    : 'application/x-pn-realaudio',
+      'ras'    : 'image/x-cmu-raster',
+      'rdf'    : 'application/xml',
+      'rgb'    : 'image/x-rgb',
+      'roff'   : 'application/x-troff',
+      'rtx'    : 'text/richtext',
+      'sgm'    : 'text/x-sgml',
+      'sgml'   : 'text/x-sgml',
+      'sh'     : 'application/x-sh',
+      'shar'   : 'application/x-shar',
+      'snd'    : 'audio/basic',
+      'so'     : 'application/octet-stream',
+      'src'    : 'application/x-wais-source',
+      'swf'    : 'application/x-shockwave-flash',
+      't'      : 'application/x-troff',
+      'tar'    : 'application/x-tar',
+      'tcl'    : 'application/x-tcl',
+      'tex'    : 'application/x-tex',
+      'texi'   : 'application/x-texinfo',
+      'texinfo': 'application/x-texinfo',
+      'tif'    : 'image/tiff',
+      'tiff'   : 'image/tiff',
+      'tr'     : 'application/x-troff',
+      'tsv'    : 'text/tab-separated-values',
+      'txt'    : 'text/plain',
+      'ustar'  : 'application/x-ustar',
+      'vcf'    : 'text/x-vcard',
+      'wav'    : 'audio/x-wav',
+      'wiz'    : 'application/msword',
+      'wsdl'   : 'application/xml',
+      'xbm'    : 'image/x-xbitmap',
+      'xlb'    : 'application/vnd.ms-excel',
+      'xls'    : 'application/vnd.ms-excel',
+      'xlsx'    : 'application/vnd.ms-excel',
+      'xml'    : 'text/xml',
+      'xpdl'   : 'application/xml',
+      'xpm'    : 'image/x-xpixmap',
+      'xsl'    : 'application/xml',
+      'xwd'    : 'image/x-xwindowdump',
+      'zip'    : 'application/zip'
+    }
+    return mimeTypes[ext.replace('.', '')];
+}
+
 /**
  * HTML5 Uploader js class
  */
@@ -312,72 +433,153 @@ function BxDolUploaderHTML5 (sUploaderObject, sStorageObject, sUniqId, options)
         if (null != this._uploader)
             this._uploader = null;
 
+        var $this = this;
+        
+        console.log(o);
+        
         var _options = {
-            url: sUrlRoot + 'storage_uploader.php',
-            uploadMultiple: false,
-            timeout: 0,
+            allowProcess: false,
+            allowRevert: false,
+            allowRemove: false,
+         //   imagePreviewHeight: 100,
+            credits: {},
+            allowMultiple: $this._isMultiple ? true : false,
             maxFiles: $this.isMultiple() ? 50 : 1,
-            params: {
-                uo: this._sUploaderObject,
-                so: this._sStorageObject,
-                uid: this._sUniqId,
-                m: this._isMultiple ? 1 : 0,
-                c: this._iContentId,
-                p: this._isPrivate,
-                a: "upload"
+            maxFileSize: o.maxFilesize +'MB',
+            instantUpload: true,
+            onaddfile: (error, file) => { 
+                if (error){
+                    $this._uploader.removeFile(file);
+                    if($this._uploader.status != 3)
+                        $this.onUploadCompleted(''); 
+                }
+                else{
+                    $this.onBeforeUpload(''); 
+                }
+            },
+            onerror: (error) => { 
+                if (error.main)
+                    $this._showError(error.main + '. ' + error.sub, true);
             },
+            onprocessfile: (error, file) => { 
+                if (error){
+                    $this._uploader.removeFile(file);
+                }
+                if($this._uploader.status != 3)
+                    $this.onUploadCompleted(''); 
+            },
+            onprocessfiles: (files) => { 
+                $this.onUploadCompleted(''); 
+            },
+            onprocessfileprogress(file, progress) {
+               
+            },
+            server: {
+				process: (fieldName, file, metadata, load, error, progress, abort) => {
+					const formData = new FormData();
+					formData.append('file', file, file.name);
+					formData.append('uo', this._sUploaderObject);
+					formData.append('so', this._sStorageObject);
+					formData.append('uid', this._sUniqId);
+					formData.append('m', this._isMultiple ? 1 : 0);
+					formData.append('c', this._iContentId);
+					formData.append('p', this._isPrivate);
+					formData.append('a', 'upload');
+
+					const request = new XMLHttpRequest();
+					request.open('POST', sUrlRoot + 'storage_uploader.php');
+
+					request.upload.onprogress = (e) => {
+						progress(e.lengthComputable, e.loaded, e.total);
+					};
+
+					request.onload = function(res) {
+						if (request.status >= 200 && request.status < 300) {
+							var o = null;
+                            try {
+                                o = JSON.parse(request.responseText);
+                            } 
+                            catch (e) {}
+                            if (o && 'undefined' !== typeof(o.error)) {
+                                $this._showError(o.error, true);
+                                error('error');
+                            }
+                            
+                            load(request.responseText);
+						}
+						else {
+							error('error');
+						}
+					};
+					request.send(formData);
+				}
+			},
         };
-
-        this._uploader = new Dropzone('#' + this._sDivId, $.extend({}, _options, o));
         
-        this._uploader.on('queuecomplete', function (file) {
-            $this.onUploadCompleted('');
-        });
-        this._uploader.on('addedfile', function (file) {
-            $this.onBeforeUpload('');
-        });        
-        this._uploader.on('totaluploadprogress', function (uploadProgress) {
-            $this.onProgress({
-                total: uploadProgress
+        aAcceptableFiles = [];
+        if (o.acceptedFiles && o.acceptedFiles != ''){
+            a = o.acceptedFiles.trim().split(/\s*,\s*/);
+            a.forEach(function(item, i, arr) {
+                if ($this.getMimeTypefromString(item))
+                    aAcceptableFiles.push($this.getMimeTypefromString(item));
             });
-        });
-        this._uploader.on('success', function (oFile, sJSON) {
-            var o = null;
-            try {
-                o = JSON.parse(sJSON);
-            } 
-            catch (e) {}
-
-            if (o && 'undefined' !== typeof(o.error)) {
-                $this._uploader.removeFile(oFile);
-                $this._showError(o.error, true);
-            }
-        });
-        this._uploader.on('error', function (oFile, sErrorMsg) {
-            $this._uploader.removeFile(oFile);
-            $this._showError(sErrorMsg, true);
-        });
+        }
+        if (aAcceptableFiles.length){
+            _options.acceptedFileTypes = aAcceptableFiles;
+        }
+        
+        if (o.resizeWidth || o.resizeHeight){
+            _options.allowImageResize = true;
+            _options.imageResizeTargetWidth = o.resizeWidth;
+            _options.imageResizeTargetHeight = o.resizeHeight;
+            _options.imageResizeMode = o.resizeMethod;
+        }
+        else{
+            _options.allowImageResize = false;
+        }
+        
+        FilePond.registerPlugin(
+            FilePondPluginImagePreview,
+            FilePondPluginFileValidateType,
+            FilePondPluginFileValidateSize,
+            FilePondPluginImageTransform,
+            FilePondPluginImageCrop,
+            FilePondPluginImageResize,
+            
+        );
+
+        this._uploader = FilePond.create(
+            document.querySelector('#' + this._sDivId),
+            $.extend({}, _options, o)
+        );    
 
         this.initPasteEditor();
     }
 
     this.onUploadCompleted = function (sErrorMsg) {        
-
         if (sErrorMsg.length)
             this._showError(sErrorMsg);        
         
-        if (0 == this._uploader.getQueuedFiles().length && 0 == this._uploader.getUploadingFiles().length) {
+        var $this = this;
+        if($this._uploader.status != 3){
             this._isUploadsInProgress = false;
             this.restoreGhosts();
             if (!this._isErrorShown) {
                 $('#' + this._sPopupContainerId).dolPopupHide({});
-                this._uploader.removeAllFiles();
+                this.removeFiles();
             }
         }
     }
 
+    this.removeFiles = function () {
+        oFiles = this._uploader.getFiles();
+        for (i = 0; i < oFiles.length; i++){
+            this._uploader.removeFile(i);
+        }
+    }
+
     this.cancelAll = function () {
-        this._uploader.removeAllFiles(true);
+        this.removeFiles();
     }
 
     this.onBeforeUpload = function (params) {
@@ -390,9 +592,19 @@ function BxDolUploaderHTML5 (sUploaderObject, sStorageObject, sUniqId, options)
     }
 
     this.onClickCancel = function () {
-        this._uploader.removeAllFiles(true);
+        var $this = this;
+        if (this._isUploadsInProgress) {
+            bx_confirm(_t('_sys_uploader_confirm_close_popup'), function() {
+                $this.removeFiles();
+                $this.cancelAll();
+                $('#' + $this._sPopupContainerId).dolPopupHide({});
+            });
+        } else {
+            $this.removeFiles();
+            $('#' + this._sPopupContainerId).dolPopupHide();
+        }
+        
         BxDolUploaderSimple.prototype._clearErrors.call(this);
-        BxDolUploaderSimple.prototype.onClickCancel.call(this);
     }
 
     this.onShowPopup = function () {

plugins_public/filepond/filepond-plugin-file-validate-type.js

@@ -0,0 +1,240 @@
+/*!
+ * FilePondPluginFileValidateType 1.2.6
+ * Licensed under MIT, https://opensource.org/licenses/MIT/
+ * Please visit https://pqina.nl/filepond/ for details.
+ */
+
+/* eslint-disable */
+
+(function(global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined'
+    ? (module.exports = factory())
+    : typeof define === 'function' && define.amd
+    ? define(factory)
+    : ((global = global || self),
+      (global.FilePondPluginFileValidateType = factory()));
+})(this, function() {
+  'use strict';
+
+  var plugin = function plugin(_ref) {
+    var addFilter = _ref.addFilter,
+      utils = _ref.utils;
+    // get quick reference to Type utils
+    var Type = utils.Type,
+      isString = utils.isString,
+      replaceInString = utils.replaceInString,
+      guesstimateMimeType = utils.guesstimateMimeType,
+      getExtensionFromFilename = utils.getExtensionFromFilename,
+      getFilenameFromURL = utils.getFilenameFromURL;
+
+    var mimeTypeMatchesWildCard = function mimeTypeMatchesWildCard(
+      mimeType,
+      wildcard
+    ) {
+      var mimeTypeGroup = (/^[^/]+/.exec(mimeType) || []).pop(); // image/png -> image
+      var wildcardGroup = wildcard.slice(0, -2); // image/* -> image
+      return mimeTypeGroup === wildcardGroup;
+    };
+
+    var isValidMimeType = function isValidMimeType(
+      acceptedTypes,
+      userInputType
+    ) {
+      return acceptedTypes.some(function(acceptedType) {
+        // accepted is wildcard mime type
+        if (/\*$/.test(acceptedType)) {
+          return mimeTypeMatchesWildCard(userInputType, acceptedType);
+        }
+
+        // is normal mime type
+        return acceptedType === userInputType;
+      });
+    };
+
+    var getItemType = function getItemType(item) {
+      // if the item is a url we guess the mime type by the extension
+      var type = '';
+      if (isString(item)) {
+        var filename = getFilenameFromURL(item);
+        var extension = getExtensionFromFilename(filename);
+        if (extension) {
+          type = guesstimateMimeType(extension);
+        }
+      } else {
+        type = item.type;
+      }
+
+      return type;
+    };
+
+    var validateFile = function validateFile(
+      item,
+      acceptedFileTypes,
+      typeDetector
+    ) {
+      // no types defined, everything is allowed \o/
+      if (acceptedFileTypes.length === 0) {
+        return true;
+      }
+
+      // gets the item type
+      var type = getItemType(item);
+
+      // no type detector, test now
+      if (!typeDetector) {
+        return isValidMimeType(acceptedFileTypes, type);
+      }
+
+      // use type detector
+      return new Promise(function(resolve, reject) {
+        typeDetector(item, type)
+          .then(function(detectedType) {
+            if (isValidMimeType(acceptedFileTypes, detectedType)) {
+              resolve();
+            } else {
+              reject();
+            }
+          })
+          .catch(reject);
+      });
+    };
+
+    var applyMimeTypeMap = function applyMimeTypeMap(map) {
+      return function(acceptedFileType) {
+        return map[acceptedFileType] === null
+          ? false
+          : map[acceptedFileType] || acceptedFileType;
+      };
+    };
+
+    // setup attribute mapping for accept
+    addFilter('SET_ATTRIBUTE_TO_OPTION_MAP', function(map) {
+      return Object.assign(map, {
+        accept: 'acceptedFileTypes'
+      });
+    });
+
+    // filtering if an item is allowed in hopper
+    addFilter('ALLOW_HOPPER_ITEM', function(file, _ref2) {
+      var query = _ref2.query;
+      // if we are not doing file type validation exit
+      if (!query('GET_ALLOW_FILE_TYPE_VALIDATION')) {
+        return true;
+      }
+
+      // we validate the file against the accepted file types
+      return validateFile(file, query('GET_ACCEPTED_FILE_TYPES'));
+    });
+
+    // called for each file that is loaded
+    // right before it is set to the item state
+    // should return a promise
+    addFilter('LOAD_FILE', function(file, _ref3) {
+      var query = _ref3.query;
+      return new Promise(function(resolve, reject) {
+        if (!query('GET_ALLOW_FILE_TYPE_VALIDATION')) {
+          resolve(file);
+          return;
+        }
+
+        var acceptedFileTypes = query('GET_ACCEPTED_FILE_TYPES');
+
+        // custom type detector method
+        var typeDetector = query('GET_FILE_VALIDATE_TYPE_DETECT_TYPE');
+
+        // if invalid, exit here
+        var validationResult = validateFile(
+          file,
+          acceptedFileTypes,
+          typeDetector
+        );
+
+        var handleRejection = function handleRejection() {
+          var acceptedFileTypesMapped = acceptedFileTypes
+            .map(
+              applyMimeTypeMap(
+                query('GET_FILE_VALIDATE_TYPE_LABEL_EXPECTED_TYPES_MAP')
+              )
+            )
+            .filter(function(label) {
+              return label !== false;
+            });
+
+          reject({
+            status: {
+              main: query('GET_LABEL_FILE_TYPE_NOT_ALLOWED'),
+              sub: replaceInString(
+                query('GET_FILE_VALIDATE_TYPE_LABEL_EXPECTED_TYPES'),
+                {
+                  allTypes: acceptedFileTypesMapped.join(', '),
+                  allButLastType: acceptedFileTypesMapped
+                    .slice(0, -1)
+                    .join(', '),
+                  lastType:
+                    acceptedFileTypesMapped[acceptedFileTypesMapped.length - 1]
+                }
+              )
+            }
+          });
+        };
+
+        // has returned new filename immidiately
+        if (typeof validationResult === 'boolean') {
+          if (!validationResult) {
+            return handleRejection();
+          }
+          return resolve(file);
+        }
+
+        // is promise
+        validationResult
+          .then(function() {
+            resolve(file);
+          })
+          .catch(handleRejection);
+      });
+    });
+
+    // expose plugin
+    return {
+      // default options
+      options: {
+        // Enable or disable file type validation
+        allowFileTypeValidation: [true, Type.BOOLEAN],
+
+        // What file types to accept
+        acceptedFileTypes: [[], Type.ARRAY],
+        // - must be comma separated
+        // - mime types: image/png, image/jpeg, image/gif
+        // - extensions: .png, .jpg, .jpeg ( not enabled yet )
+        // - wildcards: image/*
+
+        // label to show when a type is not allowed
+        labelFileTypeNotAllowed: ['File is of invalid type', Type.STRING],
+
+        // nicer label
+        fileValidateTypeLabelExpectedTypes: [
+          'Expects {allButLastType} or {lastType}',
+          Type.STRING
+        ],
+
+        // map mime types to extensions
+        fileValidateTypeLabelExpectedTypesMap: [{}, Type.OBJECT],
+
+        // Custom function to detect type of file
+        fileValidateTypeDetectType: [null, Type.FUNCTION]
+      }
+    };
+  };
+
+  // fire pluginloaded event if running in browser, this allows registering the plugin when using async script tags
+  var isBrowser =
+    typeof window !== 'undefined' && typeof window.document !== 'undefined';
+  if (isBrowser) {
+    document.dispatchEvent(
+      new CustomEvent('FilePond:pluginloaded', { detail: plugin })
+    );
+  }
+
+  return plugin;
+});

plugins_public/filepond/filepond-plugin-image-crop.min.js

@@ -0,0 +1,9 @@
+/*!
+ * FilePondPluginImageCrop 2.0.6
+ * Licensed under MIT, https://opensource.org/licenses/MIT/
+ * Please visit https://pqina.nl/filepond/ for details.
+ */
+
+/* eslint-disable */
+
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).FilePondPluginImageCrop=e()}(this,function(){"use strict";var t=function(t){return/^image/.test(t.type)},e=function(e){var n=e.addFilter,o=e.utils,r=o.Type,i=o.isFile,a=o.getNumericAspectRatioFromString,u=function(e,n){return!(!t(e.file)||!n("GET_ALLOW_IMAGE_CROP"))},c=function(t){return"object"==typeof t},f=function(t){return"number"==typeof t},p=function(t,e){return t.setMetadata("crop",Object.assign({},t.getMetadata("crop"),e))};return n("DID_CREATE_ITEM",function(t,e){var n=e.query;t.extend("setImageCrop",function(e){if(u(t,n)&&c(center))return t.setMetadata("crop",e),e}),t.extend("setImageCropCenter",function(e){if(u(t,n)&&c(e))return p(t,{center:e})}),t.extend("setImageCropZoom",function(e){if(u(t,n)&&f(e))return p(t,{zoom:Math.max(1,e)})}),t.extend("setImageCropRotation",function(e){if(u(t,n)&&f(e))return p(t,{rotation:e})}),t.extend("setImageCropFlip",function(e){if(u(t,n)&&c(e))return p(t,{flip:e})}),t.extend("setImageCropAspectRatio",function(e){if(u(t,n)&&void 0!==e){var o=t.getMetadata("crop"),r=a(e),i={center:{x:.5,y:.5},flip:o?Object.assign({},o.flip):{horizontal:!1,vertical:!1},rotation:0,zoom:1,aspectRatio:r};return t.setMetadata("crop",i),i}})}),n("DID_LOAD_ITEM",function(e,n){var o=n.query;return new Promise(function(n,r){var u=e.file;if(!i(u)||!t(u)||!o("GET_ALLOW_IMAGE_CROP"))return n(e);if(e.getMetadata("crop"))return n(e);var c=o("GET_IMAGE_CROP_ASPECT_RATIO");e.setMetadata("crop",{center:{x:.5,y:.5},flip:{horizontal:!1,vertical:!1},rotation:0,zoom:1,aspectRatio:c?a(c):null}),n(e)})}),{options:{allowImageCrop:[!0,r.BOOLEAN],imageCropAspectRatio:[null,r.STRING]}}};return"undefined"!=typeof window&&void 0!==window.document&&document.dispatchEvent(new CustomEvent("FilePond:pluginloaded",{detail:e})),e});

plugins_public/filepond/filepond-plugin-image-resize.min.js

@@ -0,0 +1,9 @@
+/*!
+ * FilePondPluginImageResize 2.0.10
+ * Licensed under MIT, https://opensource.org/licenses/MIT/
+ * Please visit https://pqina.nl/filepond/ for details.
+ */
+
+/* eslint-disable */
+
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).FilePondPluginImageResize=t()}(this,function(){"use strict";var e=function(e){var t=e.addFilter,i=e.utils.Type;return t("DID_LOAD_ITEM",function(e,t){var i=t.query;return new Promise(function(t,n){var r=e.file;if(!function(e){return/^image/.test(e.type)}(r)||!i("GET_ALLOW_IMAGE_RESIZE"))return t(e);var u=i("GET_IMAGE_RESIZE_MODE"),o=i("GET_IMAGE_RESIZE_TARGET_WIDTH"),a=i("GET_IMAGE_RESIZE_TARGET_HEIGHT"),l=i("GET_IMAGE_RESIZE_UPSCALE");if(null===o&&null===a)return t(e);var d,f,E,s=null===o?a:o,c=null===a?s:a,I=URL.createObjectURL(r);d=I,f=function(i){if(URL.revokeObjectURL(I),!i)return t(e);var n=i.width,r=i.height,o=(e.getMetadata("exif")||{}).orientation||-1;if(o>=5&&o<=8){var a=[r,n];n=a[0],r=a[1]}if(n===s&&r===c)return t(e);if(!l)if("cover"===u){if(n<=s||r<=c)return t(e)}else if(n<=s&&r<=s)return t(e);e.setMetadata("resize",{mode:u,upscale:l,size:{width:s,height:c}}),t(e)},(E=new Image).onload=function(){var e=E.naturalWidth,t=E.naturalHeight;E=null,f({width:e,height:t})},E.onerror=function(){return f(null)},E.src=d})}),{options:{allowImageResize:[!0,i.BOOLEAN],imageResizeMode:["cover",i.STRING],imageResizeUpscale:[!0,i.BOOLEAN],imageResizeTargetWidth:[null,i.INT],imageResizeTargetHeight:[null,i.INT]}}};return"undefined"!=typeof window&&void 0!==window.document&&document.dispatchEvent(new CustomEvent("FilePond:pluginloaded",{detail:e})),e});

template/css/uploaders.css

@@ -35,14 +35,28 @@
     margin-bottom:5px;
 }
 
-/* html5 uploader */
-
-.bx-uploader-html5-drop-area { 
-    width:auto;
-    height:12rem;
-    overflow-y:auto;
+/* html5 filepond uploader */
+.bx-uploader-html5-drop-area .filepond--item {
+    width: calc(33% - 0.5em);
+}
+.filepond--panel-root{
+    background: none !important;
+}
+.filepond--panel-center.filepond--panel-root{
+    visibility: visible !important;
+    transform: translate3d(0px, 8px, 0px) scale3d(1, 0.6, 1);
+}
+.filepond--panel-bottom.filepond--panel-root{
+    transform: translate3d(0px, 68px, 0px);
 }
-.bx-uploader-html5-drop-area.dropzone .dz-message {
+.bx-uploader-html5-drop-area{
+    max-height: 30em;
+}
+.filepond{
+    min-height: 76px;
+    margin-bottom: 0px !important;
+}
+.bx-uploader-html5-drop-area.filepond .dz-message {
     margin:3.5em 0;
 }
 .bx-uploader-html5-errors-area {
@@ -57,6 +71,13 @@
     padding:0;
 }
 
+.border-dashed {
+    border-style: dashed;
+}
+.rounded-lg {
+    border-radius: .5rem;
+}
+
 /* crop uploader */
 
 .bx-popup-content-wrapped .bx-croppie-element {

template/scripts/BxBaseUploaderHTML5.php

@@ -32,10 +32,19 @@ class BxBaseUploaderHTML5 extends BxDolUploader
     public function addCssJs ($bDynamic = false)
     {
         $s = parent::addCssJs ($bDynamic);
-        $s .= $this->_oTemplate->addJs('dropzone/dropzone.min.js', $bDynamic);
-        $s .= $this->_oTemplate->addCss(array(
-            BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'dropzone/|dropzone.min.css',
-        ), $bDynamic);
+        $s .= $this->_oTemplate->addJs([
+                'filepond/filepond.min.js',
+                'filepond/filepond-plugin-image-preview.min.js',
+                'filepond/filepond-plugin-image-transform.min.js',
+                'filepond/filepond-plugin-image-crop.min.js',
+                'filepond/filepond-plugin-image-resize.min.js',
+                'filepond/filepond-plugin-file-validate-size.min.js',
+                'filepond/filepond-plugin-file-validate-type.js',
+            ], $bDynamic);
+        $s .= $this->_oTemplate->addCss([
+                BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'filepond/|filepond.min.css',
+                BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'filepond/|filepond-plugin-image-preview.min.css',
+            ], $bDynamic);
         return $bDynamic ? $s : '';
     }
 

template/uploader_form_html5.html

@@ -1,8 +1,8 @@
 <div id="__form_container_id__" class="bx-uploader-form-cont bx-popup-width">
-    <div class="bx-def-padding-sec-bottom">__restrictions_text__</div>
+    <div id="__div_id__" class="filepond bx-uploader-html5-drop-area border-2 border-gray-300 border-dashed rounded-lg"></div>
     <input type="text" id="__focus_div_id__" class="bx-uploader-html5-paste-catcher" tabindex="1" />
-    <div id="__errors_container_id__" class="bx-uploader-html5-errors-area"></div>
-    <div id="__div_id__" class="dropzone bx-uploader-html5-drop-area"></div> 
+    <div class="bx-def-padding-sec-bottom bx-def-font-small">__restrictions_text__</div>
+    <div id="__errors_container_id__" class="bx-uploader-html5-errors-area bx-def-font-small"></div>
     <div class="bx-uploader-html5 bx-def-margin-top bx-clearfix">
         <div class="bx-btn" onclick="__uploader_instance_name__.onClickCancel()"><bx_text:_sys_uploader_close /></div>
     </div>