Fix #1642: Enhance `filebatchpreupload` event listening for effective aborting

CHANGE.md

@@ -9,6 +9,7 @@ Change Log: `bootstrap-fileinput`
 - (enh #1726): Update Chinese translations.
 - (enh #1722): Enhance zoom cache rendering and carousel navigation indicators.
 - (enh #1720): Enhance parsing of `zoomData` to lazy load content asynchronously only on zoom.
+- (enh #1642): Enhance `filebatchpreupload` event listening for effective aborting.
 
 ## version 5.2.2
 

examples/index-bs5.html

@@ -35,7 +35,7 @@
         </div>
         <br>
         <div class="file-loading">
-            <input id="file-0a" class="file" type="file" multiple data-min-file-count="1" data-theme="fas">
+            <input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
         </div>
         <br>
         <button type="submit" class="btn btn-primary">Submit</button>
@@ -47,10 +47,10 @@
     <br>
     <textarea id="description" rows=3" class="form-control" placeholder="Enter description for the files selected..."></textarea>
     <br>
-    <form enctype="multipart/form-data">
+    <form enctype="multipart/form-data" action="">
         <label for="file-0b">Test invalid input type</label>
         <div class="file-loading">
-            <input id="file-0b" name="file-0b" class="file" type="text" multiple data-min-file-count="1" data-theme="fas">
+            <input id="file-0b" name="file-0b" class="file" type="text" multiple data-min-file-count="1">
         </div>
         <script>
             $(document).on('ready', function () {
@@ -59,31 +59,31 @@
         </script>
     </form>
     <hr>
-    <form enctype="multipart/form-data">
+    <form enctype="multipart/form-data" action="http://localhost/plugins/test">
         <div class="file-loading">
-            <input id="file-0c" class="file" type="file" multiple data-min-file-count="3" data-theme="fas">
+            <input id="file-0c" class="file" type="file" multiple data-min-file-count="3">
         </div>
         <hr>
         <div class="form-group">
             <div class="file-loading">
-                <input id="file-0d" class="file" type="file" data-theme="fas">
+                <input id="file-0d" class="file" type="file">
             </div>
         </div>
         <hr>
         <div class="form-group">
             <div class="file-loading">
-                <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2" data-theme="fas">
+                <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
             </div>
         </div>
         <hr>
         <div class="form-group">
             <div class="file-loading">
-                <input id="file-2" type="file" class="file" readonly data-show-upload="false" data-theme="fas">
+                <input id="file-2" type="file" class="file" readonly data-show-upload="false">
             </div>
         </div>
         <hr>
         <div class="form-group">
-            <label for="file-3">Preview File Icon</label>
+            <label for="file-3">Batch Preupload Error Check</label>
             <div class="file-loading">
                 <input id="file-3" type="file" multiple>
             </div>
@@ -91,7 +91,7 @@
         <hr>
         <div class="form-group">
             <div class="file-loading">
-                <input id="file-4" type="file" class="file" data-upload-url="#" data-theme="fas">
+                <input id="file-4" type="file" class="file" data-upload-url="#">
             </div>
         </div>
         <hr>
@@ -104,14 +104,14 @@
         <hr>
         <div class="form-group">
             <div class="file-loading">
-                <input type="file" class="file" id="test-upload" multiple data-theme="fas">
+                <input type="file" class="file" id="test-upload" multiple>
             </div>
             <div id="errorBlock" class="help-block"></div>
         </div>
         <hr>
         <div class="form-group">
             <div class="file-loading">
-                <input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#" data-theme="fas">
+                <input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#">
             </div>
         </div>
     </form>
@@ -172,13 +172,10 @@
      */
     $("#file-3").fileinput({
         theme: 'fas',
-        showUpload: false,
-        showCaption: false,
-        browseClass: "btn btn-primary btn-lg",
-        fileType: "any",
-        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
+        browseClass: "btn btn-primary",
         overwriteInitial: false,
         initialPreviewAsData: true,
+        //uploadUrl: 'http://localhost/plugins/test-upload',
         initialPreview: [
             "http://lorempixel.com/640/360/transport/1",
             "http://lorempixel.com/640/360/transport/2",
@@ -189,6 +186,11 @@
             {caption: "transport-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2, zoomData: 'http://lorempixel.com/1920/1080/transport/2'},
             {caption: "transport-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3, zoomData: 'http://lorempixel.com/1920/1080/transport/3'}
         ]
+    }).on('filebatchpreupload', function(e, data) {
+        return {
+            message: 'Error here',
+            data: data
+        }
     });
     $("#file-4").fileinput({
         theme: 'fas',

js/fileinput.js

@@ -2439,7 +2439,12 @@
             } else {
                 self.$element.trigger(e);
             }
-            if (e.isDefaultPrevented() || e.result === false) {
+            var out = e.result, isAborted = out === false;
+            if (e.isDefaultPrevented() || isAborted) {
+                return false;
+            }
+            if (e.type === 'filebatchpreupload' && (out || isAborted)) {
+                self.ajaxAborted = out;
                 return false;
             }
             switch (event) {
@@ -2461,7 +2466,7 @@
                 // receive data response via `filecustomerror` event`
                 default:
                     if (!self.ajaxAborted) {
-                        self.ajaxAborted = e.result;
+                        self.ajaxAborted = out;
                     }
                     break;
             }
@@ -3646,7 +3651,6 @@
                         $thumb.removeClass('file-uploading');
                         $btnUpload.removeAttr('disabled');
                         $btnDelete.removeAttr('disabled');
-                        self.unlock();
                     }
                     self._setProgressCancelled();
                 }
@@ -3731,6 +3735,28 @@
                 formdata.append(self.uploadFileAttr, file, fileName);
             }
         },
+        _checkBatchPreupload: function (outData, jqXHR) {
+            var self = this, out = self._raise('filebatchpreupload', [outData]);
+            if (out) {
+                return true;
+            }
+            self._abort(outData);
+            if (jqXHR) {
+                jqXHR.abort();
+            }
+            self._getThumbs().each(function () {
+                var $thumb = $(this), $btnUpload = $thumb.find('.kv-file-upload'),
+                    $btnDelete = $thumb.find('.kv-file-remove');
+                if ($thumb.hasClass('file-preview-loading')) {
+                    self._setThumbStatus($thumb, 'New');
+                    $thumb.removeClass('file-uploading');
+                }
+                $btnUpload.removeAttr('disabled');
+                $btnDelete.removeAttr('disabled');
+            });
+            self._setProgressCancelled();
+            return false;
+        },
         _uploadBatch: function () {
             var self = this, fm = self.fileManager, total = fm.total(), params = {}, fnBefore, fnSuccess, fnError,
                 fnComplete, hasPostData = total > 0 || !$.isEmptyObject(self.uploadExtraData), errMsg,
@@ -3759,21 +3785,7 @@
                         $btnDelete.attr('disabled', true);
                     });
                 }
-                self._raise('filebatchpreupload', [outData]);
-                if (self._abort(outData)) {
-                    jqXHR.abort();
-                    self._getThumbs().each(function () {
-                        var $thumb = $(this), $btnUpload = $thumb.find('.kv-file-upload'),
-                            $btnDelete = $thumb.find('.kv-file-remove');
-                        if ($thumb.hasClass('file-preview-loading')) {
-                            self._setThumbStatus($thumb, 'New');
-                            $thumb.removeClass('file-uploading');
-                        }
-                        $btnUpload.removeAttr('disabled');
-                        $btnDelete.removeAttr('disabled');
-                    });
-                    self._setProgressCancelled();
-                }
+                self._checkBatchPreupload(outData, jqXHR);
             };
             fnSuccess = function (data, textStatus, jqXHR) {
                 /** @namespace data.errorkeys */
@@ -3863,20 +3875,13 @@
         _uploadExtraOnly: function () {
             var self = this, params = {}, fnBefore, fnSuccess, fnComplete, fnError, formdata = new FormData(), errMsg,
                 op = self.ajaxOperations.uploadExtra;
-            if (self._abort(params)) {
-                return;
-            }
             fnBefore = function (jqXHR) {
                 self.lock();
                 var outData = self._getOutData(formdata, jqXHR);
-                self._raise('filebatchpreupload', [outData]);
                 self._setProgress(50);
                 params.data = outData;
                 params.xhr = jqXHR;
-                if (self._abort(params)) {
-                    jqXHR.abort();
-                    self._setProgressCancelled();
-                }
+                self._checkBatchPreupload(outData, jqXHR);
             };
             fnSuccess = function (data, textStatus, jqXHR) {
                 var outData = self._getOutData(formdata, jqXHR, data);
@@ -5152,6 +5157,7 @@
                 self._setProgress(101, self.$progress, self.msgCancelled);
                 self._showFileError(self.ajaxAborted.message, data, 'filecustomerror');
                 self.cancel();
+                self.unlock();
                 return true;
             }
             return !!self.ajaxAborted;
@@ -5834,7 +5840,9 @@
             }
             if (self.uploadAsync || self.enableResumableUpload) {
                 outData = self._getOutData(null);
-                self._raise('filebatchpreupload', [outData]);
+                if (!self._checkBatchPreupload(outData)) {
+                    return;
+                }
                 self.fileBatchCompleted = false;
                 self.uploadCache = [];
                 $.each(self.getFileStack(), function (id) {