Add "onUpload" AJAX handler to FileUpload widget (#4311)

Run an AJAX handler on uploading and processing a file as opposed to using a post() data check in the widget initialization, as the widget may initialize several times in certain circumstances - eg. inside a relation widget.

Credit to @alxy. Refs: https://github.com/octobercms/october/issues/4300

modules/backend/formwidgets/FileUpload.php

@@ -113,7 +113,6 @@ class FileUpload extends FormWidgetBase
         }
 
         $this->getConfigFormWidget();
-        $this->checkUploadPostback();
     }
 
     /**
@@ -410,15 +409,10 @@ class FileUpload extends FormWidgetBase
     }
 
     /**
-     * Checks the current request to see if it is a postback containing a file upload
+     * Upload handler for the server-side processing of uploaded files
-     * for this particular widget.
      */
-    protected function checkUploadPostback()
+    public function onUpload()
     {
-        if (!($uniqueId = Request::header('X-OCTOBER-FILEUPLOAD')) || $uniqueId != $this->getId()) {
-            return;
-        }
-
         try {
             if (!Input::hasFile('file_data')) {
                 throw new ApplicationException('File missing from request');
@@ -482,8 +476,7 @@ class FileUpload extends FormWidgetBase
             $response = Response::make($ex->getMessage(), 400);
         }
 
-        // Override the controller response
+        return $response;
-        $this->controller->setResponse($response);
     }
 
     /**

modules/backend/formwidgets/fileupload/assets/js/fileupload.js

@@ -114,10 +114,6 @@
             this.uploaderOptions.previewTemplate = $(this.options.template).html()
         }
 
-        if (this.options.uniqueId) {
-            this.uploaderOptions.headers['X-OCTOBER-FILEUPLOAD'] = this.options.uniqueId
-        }
-
         this.uploaderOptions.thumbnailWidth = this.options.thumbnailWidth
             ? this.options.thumbnailWidth : null
 
@@ -192,6 +188,7 @@
 
     FileUpload.prototype.onUploadSending = function(file, xhr, formData) {
         this.addExtraFormData(formData)
+        xhr.setRequestHeader('X-OCTOBER-REQUEST-HANDLER', this.options.uploadHandler)
     }
 
     FileUpload.prototype.onUploadSuccess = function(file, response) {
@@ -428,6 +425,7 @@
 
     FileUpload.DEFAULTS = {
         url: window.location,
+        uploadHandler: null,
         configHandler: null,
         sortHandler: null,
         uniqueId: null,

modules/backend/formwidgets/fileupload/partials/_file_multi.htm

@@ -2,6 +2,7 @@
     id="<?= $this->getId() ?>"
     class="field-fileupload style-file-multi is-sortable is-multi <?= count($fileList) ? 'is-populated' : '' ?> <?= $this->previewMode ? 'is-preview' : '' ?>"
     data-control="fileupload"
+    data-upload-handler="<?= $this->getEventHandler('onUpload') ?>"
     data-template="#<?= $this->getId('template') ?>"
     data-error-template="#<?= $this->getId('errorTemplate') ?>"
     data-sort-handler="<?= $this->getEventHandler('onSortAttachments') ?>"

modules/backend/formwidgets/fileupload/partials/_file_single.htm

@@ -2,6 +2,7 @@
     id="<?= $this->getId() ?>"
     class="field-fileupload style-file-single <?= $singleFile ? 'is-populated' : '' ?> <?= $this->previewMode ? 'is-preview' : '' ?>"
     data-control="fileupload"
+    data-upload-handler="<?= $this->getEventHandler('onUpload') ?>"
     data-template="#<?= $this->getId('template') ?>"
     data-error-template="#<?= $this->getId('errorTemplate') ?>"
     data-unique-id="<?= $this->getId() ?>"

modules/backend/formwidgets/fileupload/partials/_image_multi.htm

@@ -2,6 +2,7 @@
     id="<?= $this->getId() ?>"
     class="field-fileupload style-image-multi is-sortable is-multi <?= count($fileList) ? 'is-populated' : '' ?> <?= $this->previewMode ? 'is-preview' : '' ?>"
     data-control="fileupload"
+    data-upload-handler="<?= $this->getEventHandler('onUpload') ?>"
     data-template="#<?= $this->getId('template') ?>"
     data-error-template="#<?= $this->getId('errorTemplate') ?>"
     data-sort-handler="<?= $this->getEventHandler('onSortAttachments') ?>"

modules/backend/formwidgets/fileupload/partials/_image_single.htm

@@ -2,6 +2,7 @@
     id="<?= $this->getId() ?>"
     class="field-fileupload style-image-single <?= $singleFile ? 'is-populated' : '' ?> <?= $this->previewMode ? 'is-preview' : '' ?>"
     data-control="fileupload"
+    data-upload-handler="<?= $this->getEventHandler('onUpload') ?>"
     data-template="#<?= $this->getId('template') ?>"
     data-error-template="#<?= $this->getId('errorTemplate') ?>"
     data-unique-id="<?= $this->getId() ?>"