소스 검색

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

Kartik Visweswaran 9 년 전
부모
커밋
e8a712d484
4개의 변경된 파일50개의 추가작업 그리고 27개의 파일을 삭제
  1. 2 1
      CHANGE.md
  2. 4 1
      README.md
  3. 44 25
      js/fileinput.js
  4. 0 0
      js/fileinput.min.js

+ 2 - 1
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
 

+ 4 - 1
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.

+ 44 - 25
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: '',

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
js/fileinput.min.js


이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.