Fix #1193: Add drag and drop functionality for form based submissions

CHANGE.md

@@ -9,6 +9,7 @@ Change Log: `bootstrap-fileinput`
 - (bug #1204): Correct merging of ajax callbacks.
 - (bug #1201, #1200): Correct `elErrorContainer` validation for `browseOnZoneClick`.
 - (enh #1197): Add new Font Awesome 5 Theme.
+- (enh #1193): Add drag and drop functionality for form based submissions.
 - (enh #1179): New property `reversePreviewOrder` to allow reversing files displayed in preview.
 - (enh #1178): Enhance BS button styling for default and FA themes.
 - (bug #1173): Correct `showRemove` validation in `fileActionSettings`.

css/fileinput.css

@@ -157,7 +157,6 @@
 }
 
 .file-caption-icon {
-    line-height: 1;
     left: 8px;
 }
 

js/fileinput.js

@@ -503,7 +503,6 @@
             self.totalImagesCount = 0;
             self.ajaxRequests = [];
             self.clearStack();
-            self.fileInputCleared = false;
             self.fileBatchCompleted = true;
             if (!self.isPreviewable) {
                 self.showPreview = false;
@@ -560,7 +559,7 @@
             }
             self.isAjaxUpload = $h.hasFileUploadSupport() && !$h.isEmpty(self.uploadUrl);
             self.isClickable = self.browseOnZoneClick && self.showPreview &&
-                (self.isAjaxUpload && self.dropZoneEnabled || !$h.isEmpty(self.defaultPreviewContent));
+                (self.dropZoneEnabled || !$h.isEmpty(self.defaultPreviewContent));
             self.slug = typeof options.slugCallback === "function" ? options.slugCallback : self._slugDefault;
             self.mainTemplate = self.showCaption ? self._getLayoutTemplate('main1') : self._getLayoutTemplate('main2');
             self.captionTemplate = self._getLayoutTemplate('caption');
@@ -1410,7 +1409,7 @@
         },
         _initDragDrop: function () {
             var self = this, $zone = self.$dropZone;
-            if (self.isAjaxUpload && self.dropZoneEnabled && self.showPreview) {
+            if (self.dropZoneEnabled && self.showPreview) {
                 self._handler($zone, 'dragenter dragover', $.proxy(self._zoneDragEnter, self));
                 self._handler($zone, 'dragleave', $.proxy(self._zoneDragLeave, self));
                 self._handler($zone, 'drop', $.proxy(self._zoneDrop, self));
@@ -1831,28 +1830,22 @@
         },
         _clearFileInput: function () {
             var self = this, $el = self.$element, $srcFrm, $tmpFrm, $tmpEl;
-            self.fileInputCleared = true;
-            if ($h.isEmpty($el.val())) {
+            if ($h.isEmpty($el.files) && $h.isEmpty($el.val())) {
                 return;
             }
-            // Fix for IE ver < 11, that does not clear file inputs. Requires a sequence of steps to prevent IE
-            // crashing but still allow clearing of the file input.
-            if (self.isIE9 || self.isIE10) {
-                $srcFrm = $el.closest('form');
-                $tmpFrm = $(document.createElement('form'));
-                $tmpEl = $(document.createElement('div'));
-                $el.before($tmpEl);
-                if ($srcFrm.length) {
-                    $srcFrm.after($tmpFrm);
-                } else {
-                    $tmpEl.after($tmpFrm);
-                }
-                $tmpFrm.append($el).trigger('reset');
-                $tmpEl.before($el).remove();
-                $tmpFrm.remove();
-            } else { // normal input clear behavior for other sane browsers
-                $el.val('');
+            $el.files = null;
+            $srcFrm = $el.closest('form');
+            $tmpFrm = $(document.createElement('form'));
+            $tmpEl = $(document.createElement('div'));
+            $el.before($tmpEl);
+            if ($srcFrm.length) {
+                $srcFrm.after($tmpFrm);
+            } else {
+                $tmpEl.after($tmpFrm);
             }
+            $tmpFrm.append($el).trigger('reset');
+            $tmpEl.before($el).remove();
+            $tmpFrm.remove();
         },
         _resetUpload: function () {
             var self = this;
@@ -2944,7 +2937,8 @@
                 title += self.dropZoneClickTitle.replace('{files}', strFiles);
             }
             $zone.find('.' + self.dropZoneTitleClass).remove();
-            if (!self.isAjaxUpload || !self.showPreview || $zone.length === 0 || self.getFileStack().length > 0 || !self.dropZoneEnabled) {
+            if (!self.showPreview || $zone.length === 0 || self.getFileStack().length > 0 || !self.dropZoneEnabled ||
+                (!self.isAjaxUpload && self.$element.files)) {
                 return;
             }
             if ($zone.find($h.FRAMES).length === 0 && $h.isEmpty(self.defaultPreviewContent)) {
@@ -3258,7 +3252,7 @@
         },
         _renderMain: function () {
             var self = this,
-                dropCss = (self.isAjaxUpload && self.dropZoneEnabled) ? ' file-drop-zone' : 'file-drop-disabled',
+                dropCss = self.dropZoneEnabled ? ' file-drop-zone' : 'file-drop-disabled',
                 close = !self.showClose ? '' : self._getLayoutTemplate('close'),
                 preview = !self.showPreview ? '' : self._getLayoutTemplate('preview')
                     .setTokens({'class': self.previewClass, 'dropClass': dropCss}),
@@ -3439,34 +3433,46 @@
             fileIds.push(fileId);
         },
         _change: function (e) {
-            var self = this, $el = self.$element;
-            if (!self.isAjaxUpload && $h.isEmpty($el.val()) && self.fileInputCleared) { // IE 11 fix
-                self.fileInputCleared = false;
-                return;
-            }
-            self.fileInputCleared = false;
-            var tfiles = [], msg, total, isDragDrop = arguments.length > 1, isAjaxUpload = self.isAjaxUpload, n, len,
-                files = isDragDrop ? e.originalEvent.dataTransfer.files : $el.get(0).files, ctr = self.filestack.length,
-                isSingleUpload = $h.isEmpty($el.attr('multiple')), flagSingle = (isSingleUpload && ctr > 0),
-                folders = 0, fileIds = self._getFileIds(), throwError = function (mesg, file, previewId, index) {
+            var self = this, $el = self.$element, isDragDrop = arguments.length > 1, isAjaxUpload = self.isAjaxUpload,
+                tfiles = [], files = isDragDrop ? e.originalEvent.dataTransfer.files : $el.get(0).files, msg, total,
+                len, ctr = self.filestack.length, isSingleUpload = $h.isEmpty($el.attr('multiple')),
+                flagSingle = (isSingleUpload && ctr > 0), folders = 0, fileIds = self._getFileIds(),
+                throwError = function (mesg, file, previewId, index) {
                     var p1 = $.extend(true, {}, self._getOutData({}, {}, files), {id: previewId, index: index}),
                         p2 = {id: previewId, index: index, file: file, files: files};
-                    return self.isAjaxUpload ? self._showUploadError(mesg, p1) : self._showError(mesg, p2);
+                    return isAjaxUpload ? self._showUploadError(mesg, p1) : self._showError(mesg, p2);
+                }, maxCountCheck = function (n, m) {
+                    var msg = self.msgFilesTooMany.replace('{m}', m).replace('{n}', n);
+                    self.isError = throwError(msg, null, null, null);
+                    self.$captionContainer.removeClass('icon-visible');
+                    self._setCaption('', true);
+                    self.$container.removeClass('file-input-new file-input-ajax-new');
                 };
             self.reader = null;
             self._resetUpload();
             self._hideFileIcon();
-            if (self.isAjaxUpload) {
+            if (self.dropZoneEnabled) {
                 self.$container.find('.file-drop-zone .' + self.dropZoneTitleClass).remove();
             }
             if (isDragDrop) {
-                $.each(files, function (i, f) {
-                    if (f && !f.type && f.size !== undefined && f.size % 4096 === 0) {
-                        folders++;
+                if (self.isAjaxUpload) {
+                    $.each(files, function (i, f) {
+                        if (f && !f.type && f.size !== undefined && f.size % 4096 === 0) {
+                            folders++;
+                        } else {
+                            self._filterDuplicate(f, tfiles, fileIds);
+                        }
+                    });
+                } else {
+                    tfiles = files;
+                    len = tfiles.length;
+                    if (isSingleUpload && len > 1) {
+                        maxCountCheck(len, 1);
+                        return;
                     } else {
-                        self._filterDuplicate(f, tfiles, fileIds);
+                        $el.files = tfiles;
                     }
-                });
+                }
             } else {
                 if (e.target && e.target.files === undefined) {
                     files = e.target.value ? [{name: e.target.value.replace(/^.+\\/, '')}] : [];
@@ -3491,15 +3497,10 @@
             }
             self._resetErrors();
             len = tfiles.length;
-            total = self._getFileCount(self.isAjaxUpload ? (self.getFileStack().length + len) : len);
+            total = self._getFileCount(isAjaxUpload ? (self.getFileStack().length + len) : len);
             if (self.maxFileCount > 0 && total > self.maxFileCount) {
                 if (!self.autoReplace || len > self.maxFileCount) {
-                    n = (self.autoReplace && len > self.maxFileCount) ? len : total;
-                    msg = self.msgFilesTooMany.replace('{m}', self.maxFileCount).replace('{n}', n);
-                    self.isError = throwError(msg, null, null, null);
-                    self.$captionContainer.removeClass('icon-visible');
-                    self._setCaption('', true);
-                    self.$container.removeClass('file-input-new file-input-ajax-new');
+                    maxCountCheck(self.autoReplace && len > self.maxFileCount ? len : total, self.maxFileCount);
                     return;
                 }
                 if (total > self.maxFileCount) {
@@ -3955,7 +3956,7 @@
             self._resetPreview();
             self.$container.find('.fileinput-filename').text('');
             $h.addCss(self.$container, 'file-input-new');
-            if (self.getFrames().length || self.isAjaxUpload && self.dropZoneEnabled) {
+            if (self.getFrames().length || self.dropZoneEnabled) {
                 self.$container.removeClass('file-input-new');
             }
             self.clearStack();