Fix #371: Ability to replace files in the preview. New autoReplace property.

Author: kartik-v

CHANGE.md

@@ -7,7 +7,8 @@ Change Log: `bootstrap-fileinput`
 
 1. (enh #362): Add Bulgarian translations.
 2. (bug #370): Reverts #342 with better fix.
-3. (enh #372): Create new event `filepreajax`.
+3. (enh #371): Ability to replace files in the preview. New `autoReplace` property.
+4. (enh #372): Create new event `filepreajax`.
 
 ## version 4.2.4
 

README.md

@@ -176,6 +176,9 @@ _boolean_ whether to display the file upload cancel button. Defaults to `true`.
 ### showUploadedThumbs
 _boolean_ whether to persist display of the uploaded file thumbnails in the preview window (for ajax uploads) until the remove/clear button is pressed. Defaults to `true`.  When set to `false`, a next batch of files selected for upload will clear these thumbnails from preview.
 
+### autoReplace
+_boolean_ whether to automatically replace the files in the preview after the `maxFileCount` limit is reached and a new set of file(s) is/are selected. This will only work if a valid  `maxFileCount` is set. Defaults to `false`.
+
 ### captionClass
 _string_ any additional CSS class to append to the caption container.
 
@@ -1270,7 +1273,7 @@ $('#input-id').on('fileunlock', function(event, filestack) {
 ```
 
 #### filepreajax
-This event is triggered before submission of the upload ajax request. You could use this event to manipulate the uploadExtraData before its submitted via ajax. The following additional parameters are also available but only if the upload is triggered via each thumbnail upload button.
+This event is triggered before submission of the upload ajax request. You could use this event to manipulate the `uploadExtraData` before its submitted via ajax. The following additional parameters are also available specifically and only if the upload is triggered via each thumbnail upload button.
 
 - `previewId`: the identifier of the preview thumbnail container.
 - `index`: the zero-based index of the file in the preview container.

js/fileinput.js

@@ -1185,6 +1185,22 @@
                 self.initCaption();
             }
         },
+        resetPreviewThumbs: function (isAjax) {
+            var self = this, out;
+            if (isAjax) {
+                self.clearPreview();
+                self.filestack = [];
+                return;
+            }
+            if (self.hasInitialPreview()) {
+                out = previewCache.out(self.id);
+                self.$preview.html(out.content);
+                self.setCaption(out.caption);
+                self.initPreviewDeletes();
+            } else {
+                self.clearPreview();
+            }
+        },
         reset: function () {
             var self = this;
             self.resetPreview();
@@ -1205,7 +1221,8 @@
             self.raise('filedisabled');
             self.$element.attr('disabled', 'disabled');
             self.$container.find(".kv-fileinput-caption").addClass("file-caption-disabled");
-            self.$container.find(".btn-file, .fileinput-remove, .kv-fileinput-upload, .file-preview-frame button").attr("disabled", true);
+            self.$container.find(".btn-file, .fileinput-remove, .kv-fileinput-upload, .file-preview-frame button").attr("disabled",
+                true);
             self.initDragDrop();
         },
         enable: function () {
@@ -1907,8 +1924,9 @@
             self.fileInputCleared = false;
             var tfiles, msg, total, $preview = self.$preview, isDragDrop = arguments.length > 1,
                 files = isDragDrop ? e.originalEvent.dataTransfer.files : $el.get(0).files,
-                isSingleUpload = isEmpty($el.attr('multiple')), i = 0, f, m, folders = 0,
-                ctr = self.filestack.length, isAjaxUpload = self.isUploadable,
+                isSingleUpload = isEmpty($el.attr('multiple')), i = 0, f, n, folders = 0,
+                ctr = self.filestack.length, isAjaxUpload = self.isUploadable, len,
+                flagSingle = (isSingleUpload && ctr > 0),
                 throwError = function (mesg, file, previewId, index) {
                     var p1 = $.extend(self.getOutData({}, {}, files), {id: previewId, index: index}),
                         p2 = {id: previewId, index: index, file: file, files: files};
@@ -1949,32 +1967,32 @@
                 return;
             }
             self.resetErrors();
-            total = self.isUploadable ? self.getFileStack().length + tfiles.length : tfiles.length;
+            len = tfiles.length;
+            total = self.isUploadable ? self.getFileStack().length + len : len;
             if (self.maxFileCount > 0 && total > self.maxFileCount) {
-                msg = self.msgFilesTooMany.replace('{m}', self.maxFileCount).replace('{n}', total);
-                self.isError = throwError(msg, null, null, null);
-                self.$captionContainer.find('.kv-caption-icon').hide();
-                self.setCaption('', true);
-                self.setEllipsis();
-                self.$container.removeClass('file-input-new file-input-ajax-new');
-                return;
-            }
-            if (!isAjaxUpload || (isSingleUpload && ctr > 0)) {
-                if (self.hasInitialPreview()) {
-                    var out = previewCache.out(self.id);
-                    $preview.html(out.content);
-                    self.setCaption(out.caption);
-                    self.initPreviewDeletes();
-                } else {
-                    self.clearPreview();
+                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.find('.kv-caption-icon').hide();
+                    self.setCaption('', true);
+                    self.setEllipsis();
+                    self.$container.removeClass('file-input-new file-input-ajax-new');
+                    return;
                 }
-                if (isSingleUpload && ctr > 0) {
-                    self.filestack = [];
+                if (total > self.maxFileCount) {
+                    self.resetPreviewThumbs(isAjaxUpload);
                 }
             } else {
-                if (isAjaxUpload && ctr === 0 && (!previewCache.count(self.id) || self.overwriteInitial)) {
-                    self.clearPreview();
-                    self.filestack = [];
+                 if (!isAjaxUpload || flagSingle) {
+                    self.resetPreviewThumbs(false);
+                    if (flagSingle) {
+                        self.filestack = [];
+                    }
+                } else {
+                    if (isAjaxUpload && ctr === 0 && (!previewCache.count(self.id) || self.overwriteInitial)) {
+                        self.resetPreviewThumbs(true);
+                    }
                 }
             }
             if (self.isPreviewable) {
@@ -2168,6 +2186,7 @@
         showUpload: true,
         showCancel: true,
         showUploadedThumbs: true,
+        autoReplace: false,
         mainClass: '',
         previewClass: '',
         captionClass: '',