Upgrade to release v4.1.3

CHANGE.md

@@ -1,11 +1,23 @@
+version 4.1.3
+=============
+**Date:** 20-Dec-2014
+
+1. (enh #85): Combine output data as a single object, that is sent for various file upload events. 
+    - `filepreupload`
+    - `fileuploaded`
+    - `fileuploaderror`
+    - `filebatchuploaderror`
+    - `filebatchuploadsuccess`
+    - `filebatchuploadcomplete`
+2. (enh #86): Disable thumbnail action buttons when upload is in progress.
+    
 version 4.1.2
 =============
 **Date:** 19-Dec-2014
 
 1. (enh #81): Add new events:
     - `filebatchuploadsuccess`
-    - `filebatchuploadcomplete`
-    
+    - `filebatchuploadcomplete` 
 2. (enh #80): Allow access to `uploadExtraData` and `responseData` to following events
     - `filepreupload`
     - `fileuploaded`

README.md

@@ -7,7 +7,7 @@ The plugin incorporates a simple HTML markup with enhanced CSS styling of a HTML
 
 ![File Input Screenshot](https://lh3.googleusercontent.com/-3FiEmc_okc4/VBw_d2LBAJI/AAAAAAAAAL8/KbVj5X9Dus0/w596-h454-no/FileInput.jpg)
 
-> NOTE: The latest version of the plugin v4.1.2 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details. 
+> NOTE: The latest version of the plugin v4.1.3 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details. 
 
 ## Features  
 
@@ -987,13 +987,18 @@ $('#input-id').on('filedeleteerror', function(event, formdata, preview, index) {
 #### filepreupload
 This event is triggered before upload of each thumbnail file. Additional parameters available are: 
 
-- `formdata`: the FormData object which is passed via XHR2.
-- `extraData`: the `uploadExtraData` settings for the plugin (will return an empty object if not set).
+- `data`: This is a data object (associative array) that sends the following information, whose keys are:
+    - `form`: the FormData object which is passed via XHR2 (or empty object if not available).
+    - `files`: the file stack array (or empty object if not available).
+    - `extra`: the `uploadExtraData` settings for the plugin (or empty object if not available).
+    - `response`: the data sent via ajax response (or empty object if not available).
 - `previewId`: the identifier of the preview thumbnail container.
 - `index`: the zero-based index of the file in the preview container.
 
 ```js
-$('#input-id').on('filepreupload', function(event, formdata, extraData, preview, index) {
+$('#input-id').on('filepreupload', function(event, data, previewId, index) {
+    var formdata = data.form, files = data.files, 
+        extradata = data.extra, responsedata = data.response;
     console.log('File pre upload triggered');
 });
 ```
@@ -1001,14 +1006,18 @@ $('#input-id').on('filepreupload', function(event, formdata, extraData, preview,
 #### fileuploaded
 This event is triggered after upload is completed for each thumbnail file. Additional parameters available are: 
 
-- `formdata`: the FormData object which is passed via XHR2.
-- `extraData`: the `uploadExtraData` settings for the plugin (will return an empty object if not set).
-- `responseData`: the data sent via ajax response.
+- `data`: This is a data object (associative array) that sends the following information, whose keys are:
+    - `form`: the FormData object which is passed via XHR2 (or empty object if not available).
+    - `files`: the file stack array (or empty object if not available).
+    - `extra`: the `uploadExtraData` settings for the plugin (or empty object if not available).
+    - `response`: the data sent via ajax response (or empty object if not available).
 - `previewId`: the identifier of each file's parent thumbnail div element in the preview window.
 - `index`: the zero-based index of the file in the file stack.
 
 ```js
-$('#input-id').on('fileuploaded', function(event, formdata, extraData, responseData, preview, index) {
+$('#input-id').on('fileuploaded', function(event, data, previewId, index) {
+    var formdata = data.form, files = data.files, 
+        extradata = data.extra, responsedata = data.response;
     console.log('File uploaded triggered');
 });
 ```
@@ -1016,13 +1025,18 @@ $('#input-id').on('fileuploaded', function(event, formdata, extraData, responseD
 #### fileuploaderror
 This event is triggered when an error is faced in deletion of each thumbnail file in the `initialPreview` content set. Additional parameters available are: 
 
-- `formdata`: the FormData object which is passed via XHR2.
-- `extraData`: the `uploadExtraData` settings for the plugin (will return an empty object if not set).
+- `data`: This is a data object (associative array) that sends the following information, whose keys are:
+    - `form`: the FormData object which is passed via XHR2 (or empty object if not available).
+    - `files`: the file stack array (or empty object if not available).
+    - `extra`: the `uploadExtraData` settings for the plugin (or empty object if not available).
+    - `response`: the data sent via ajax response (or empty object if not available).
 - `previewId`: the identifier of each file's parent thumbnail div element in the preview window.
 - `index`: the zero-based index of the file in the file stack.
 
 ```js
-$('#input-id').on('fileuploaderror', function(event, formdata, extraData, preview, index) {
+$('#input-id').on('fileuploaderror', function(event, data, previewId, index) {
+    var formdata = data.form, files = data.files, 
+        extradata = data.extra, responsedata = data.response;
     console.log('File upload error');
 });
 ```
@@ -1030,12 +1044,16 @@ $('#input-id').on('fileuploaderror', function(event, formdata, extraData, previe
 #### filebatchuploadsuccess
 This event is triggered after a successful synchronous batch upload (i.e. when `uploadAsync` is `false`). Additional parameters available are: 
 
-- `filestack`: the array of selected file objects.
-- `extraData`: the `uploadExtraData` settings for the plugin (will return an empty object if not set).
-- `responseData`: the data sent via ajax response.
+- `data`: This is a data object (associative array) that sends the following information, whose keys are:
+    - `form`: the FormData object which is passed via XHR2 (or empty object if not available).
+    - `files`: the file stack array (or empty object if not available).
+    - `extra`: the `uploadExtraData` settings for the plugin (or empty object if not available).
+    - `response`: the data sent via ajax response (or empty object if not available).
 
 ```js
-$('#input-id').on('filebatchuploadsuccess', function(formdata, extraData, responseData) {
+$('#input-id').on('filebatchuploadsuccess', function(event, data) {
+    var formdata = data.form, files = data.files, 
+        extradata = data.extra, responsedata = data.response;
     console.log('File batch upload success');
 });
 ```
@@ -1043,11 +1061,16 @@ $('#input-id').on('filebatchuploadsuccess', function(formdata, extraData, respon
 #### filebatchuploaderror
 This event is triggered when any error is faced in the synchronous batch upload (i.e. when `uploadAsync` is `false`). Additional parameters available are: 
 
-- `formdata`: the FormData object which is passed via XHR2.
-- `extraData`: the `uploadExtraData` settings for the plugin (will return an empty object if not set).
+- `data`: This is a data object (associative array) that sends the following information, whose keys are:
+    - `form`: the FormData object which is passed via XHR2 (or empty object if not available).
+    - `files`: the file stack array (or empty object if not available).
+    - `extra`: the `uploadExtraData` settings for the plugin (or empty object if not available).
+    - `response`: the data sent via ajax response (or empty object if not available).
 
 ```js
-$('#input-id').on('filebatchuploaderror', function(event, formdata, extraData) {
+$('#input-id').on('filebatchuploaderror', function(event, data) {
+    var formdata = data.form, files = data.files, 
+        extradata = data.extra, responsedata = data.response;
     console.log('File upload error');
 });
 ```
@@ -1055,11 +1078,15 @@ $('#input-id').on('filebatchuploaderror', function(event, formdata, extraData) {
 #### filebatchuploadcomplete
 This event is triggered after completion of either the synchronous and asynchronous ajax batch upload. Additional parameters available are: 
 
-- `filestack`: the array of selected file objects.
-- `extraData`: the `uploadExtraData` settings for the plugin (will return an empty object if not set).
-
+- `data`: This is a data object (associative array) that sends the following information, whose keys are:
+    - `form`: the FormData object which is passed via XHR2 (or empty object if not available).
+    - `files`: the file stack array (or empty object if not available).
+    - `extra`: the `uploadExtraData` settings for the plugin (or empty object if not available).
+    - `response`: the data sent via ajax response (or empty object if not available).
 ```js
-$('#input-id').on('filebatchuploadcomplete', function(formdata, extraData) {
+$('#input-id').on('filebatchuploadcomplete', function(event, data) {
+    var formdata = data.form, files = data.files, 
+        extradata = data.extra, responsedata = data.response;
     console.log('File batch upload complete');
 });
 ```

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "bootstrap-fileinput",
-    "version": "4.1.2",
+    "version": "4.1.3",
     "homepage": "https://github.com/kartik-v/bootstrap-fileinput",
     "authors": [
         "Kartik Visweswaran <[email protected]>"

css/fileinput.css

@@ -1,7 +1,7 @@
 /*!
  * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014
  * @package bootstrap-fileinput
- * @version 4.1.2
+ * @version 4.1.3
  *
  * File input styling for Bootstrap 3.0
  * Built for Yii Framework 2.0

css/fileinput.min.css

@@ -1,7 +1,7 @@
 /*!
  * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014
  * @package bootstrap-fileinput
- * @version 4.1.2
+ * @version 4.1.3
  *
  * File input styling for Bootstrap 3.0
  * Built for Yii Framework 2.0

examples/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<!-- release v4.1.2, copyright 2014 Kartik Visweswaran -->
+<!-- release v4.1.3, copyright 2014 Kartik Visweswaran -->
 <html lang="en">
     <head>
         <meta charset="UTF-8"/>

js/fileinput.js

@@ -1,6 +1,6 @@
 /*!
  * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014
- * @version 4.1.2
+ * @version 4.1.3
  *
  * File input styled for Bootstrap 3.0 that utilizes HTML5 File Input's advanced 
  * features including the FileReader API. 
@@ -892,16 +892,22 @@
                     self.$element.trigger('filepreupload', [formdata, self.uploadExtraData, previewId, i])
                 },
                 success: function(data, textStatus, jqXHR) {
+                    var outData = {
+                        form: formdata,
+                        files: self.filestack,
+                        extra: self.uploadExtraData,
+                        response: data
+                    };
                     setTimeout(function() {
                         if(typeof data.error === 'undefined') {
                             setIndicator('indicatorSuccess', 'indicatorSuccessTitle');
                             $btnUpload.hide();
                             $btnDelete.hide();
                             self.filestack[i] = undefined;
-                            self.$element.trigger('fileuploaded', [data, formdata, self.uploadExtraData, data, previewId, i]);
+                            self.$element.trigger('fileuploaded', [outData, previewId, i]);
                         } else {
                             setIndicator('indicatorError', 'indicatorErrorTitle');
-                            self.showUploadError(data.error, formdata, self.uploadExtraData, previewId, i);
+                            self.showUploadError(data.error, outData, previewId, i);
                         }
                         updateProgress();
                         resetActions();
@@ -909,11 +915,17 @@
                 },
                 error: function(jqXHR, textStatus, errorThrown) {
                     setIndicator('indicatorError', 'indicatorErrorTitle');
+                    var outData = {
+                        form: formdata,
+                        files: self.filestack,
+                        extra: self.uploadExtraData,
+                        response: {}
+                    };
                     if (allFiles) {
                         var cap = files[i].name;
-                        self.showUploadError('<b>' + cap + '</b>: ' + errorThrown, formdata, self.uploadExtraData, previewId, i);
+                        self.showUploadError('<b>' + cap + '</b>: ' + errorThrown, outData, previewId, i);
                     } else {
-                        self.showUploadError(errorThrown, formdata, self.uploadExtraData, previewId, i);
+                        self.showUploadError(errorThrown, outData, previewId, i);
                     }
                     updateProgress();
                     resetActions();
@@ -924,10 +936,18 @@
             var self = this, files = self.filestack, total = files.length, 
                 config = self.fileActionSettings; formdata = new FormData(),
                 setIndicator = function (i, icon, msg) {
-                    $indicator = $('#' + self.previewInitId + "-" + i).find('.file-upload-indicator'), 
+                    var $indicator = $('#' + self.previewInitId + "-" + i).find('.file-upload-indicator');
                     $indicator.html(config[icon]);
                     $indicator.attr('title', config[msg]);
                 },
+                enableActions = function (i, disabled) {
+                    var $thumb = $('#' + self.previewInitId + "-" + i),
+                        $btnUpload = $thumb.find('.kv-file-upload'), 
+                        $btnDelete = $thumb.find('.kv-file-delete');
+                    $thumb.removeClass('file-uploading');
+                    $btnUpload.removeAttr('disabled');
+                    $btnDelete.removeAttr('disabled');
+                },
                 setAllUploaded = function() {
                     $.each(files, function(key, data) {
                         self.filestack[key] = undefined;
@@ -952,10 +972,24 @@
                 processData: false,
                 contentType: false,
                 beforeSend: function() {
-                    addCss(self.$preview.find('.file-preview-frame'), 'file-uploading');
                     self.lock();
+                    if (!self.showPreview) {
+                        return;
+                    }
+                    self.$preview.find('.file-preview-frame').each(function() {
+                        var $thumb = $(this), $btnUpload = $thumb.find('.kv-file-upload'), $btnDelete = $thumb.find('.kv-file-remove');
+                        addCss($thumb, 'file-uploading');
+                        $btnUpload.attr('disabled', true);
+                        $btnDelete.attr('disabled', true);
+                    });
                 },
                 success: function(data, textStatus, jqXHR) {
+                    var outData = {
+                        form: formdata,
+                        files: self.filestack,
+                        extra: self.uploadExtraData,
+                        response: data
+                    };
                     setTimeout(function() {
                         var keys = isEmpty(data.errorkeys) ? [] : data.errorkeys;
                         if(typeof data.error === 'undefined' || isEmpty(data.error)) {
@@ -966,34 +1000,30 @@
                                 self.$preview.find('.file-preview-frame').each(function() {
                                     var $thumb = $(this), key = $thumb.attr('data-fileindex');
                                     setIndicator(key, 'indicatorSuccess', 'indicatorSuccessTitle');
-                                    $thumb.removeClass('file-uploading');
+                                    enableActions(key);
                                 });
                             } else {
                                 self.reset();
                             }
-                            self.$element.trigger('filebatchuploadsuccess', [self.filestack, self.uploadExtraData, data]);
+                            self.$element.trigger('filebatchuploadsuccess', [outData]);
                         } else {
                             self.$preview.find('.file-preview-frame').each(function() {
                                 var $thumb = $(this), key = $thumb.attr('data-fileindex');
+                                enableActions(key);
                                 if (keys.length == 0) {
-                                    $thumb.removeClass('file-uploading');
                                     setIndicator(key, 'indicatorError', 'indicatorErrorTitle');
                                     return;
                                 }
                                 if ($.inArray(key, keys)) {
                                     setIndicator(key, 'indicatorError', 'indicatorErrorTitle');
                                 } else {
-                                    var $upload = $thumb.find('.kv-file-upload'), $remove = $thumb.find('.kv-file-remove');
-                                    addCss($upload, 'disabled');
-                                    addCss($remove, 'disabled');
-                                    $upload.hide();
-                                    $remove.hide();
-                                    $thumb.removeClass('file-uploading');
+                                    $thumb.find('.kv-file-upload').hide();
+                                    $thumb.find('.kv-file-remove').hide();
                                     setIndicator(key, 'indicatorSuccess', 'indicatorSuccessTitle');
                                     self.filestack[key] = undefined;
                                 }
                             });
-                            self.showUploadError(data.error, formdata, self.uploadExtraData, null, null, 'filebatchuploaderror');
+                            self.showUploadError(data.error, outData, null, null, 'filebatchuploaderror');
                         }
                     }, 100);
                 },
@@ -1003,9 +1033,17 @@
                     self.$element.trigger('filebatchuploadcomplete', [self.filestack, self.uploadExtraData]);
                 },
                 error: function(jqXHR, textStatus, errorThrown) {
-                    self.showUploadError(errorThrown, formdata, self.uploadExtraData, null, null, 'filebatchuploaderror');
+                    var outData = {
+                        form: formdata,
+                        files: self.filestack,
+                        extra: self.uploadExtraData,
+                        response: {}
+                    };
+                    self.showUploadError(errorThrown, outData, null, null, 'filebatchuploaderror');
                     self.uploadFileCount = total - 1;
                     self.$preview.find('.file-preview-frame').removeClass('file-uploading');
+                    self.$preview.find('.file-preview-frame kv-file-upload').removeAttr('disabled');
+                    self.$preview.find('.file-preview-frame kv-file-delete').removeAttr('disabled');
                 }
             });
         },
@@ -1028,7 +1066,7 @@
                 $error.hide();
             }
         },
-        showUploadError: function (msg, file, extraData, previewId, index) {
+        showUploadError: function (msg, data, previewId, index) {
             var self = this, $error = self.$errorContainer, $el = self.$element, 
                 ev = arguments.length > 4 ? arguments[4] : 'fileuploaderror';
             if ($error.find('ul').length == 0) {
@@ -1037,7 +1075,7 @@
                 $error.find('ul').append('<li>' + msg + '</li>');
             }
             $error.fadeIn(800);
-            $el.trigger(ev, [file, extraData, previewId, index]);
+            $el.trigger(ev, [data, previewId, index]);
             addCss(self.$container, 'has-error');
             return true;
         },
@@ -1181,7 +1219,13 @@
                 ctr = self.filestack.length,
                 throwError = function(msg, file, previewId, index) {
                     self.previewDefault(file, previewId, true);
-                    return self.isUploadable ? self.showUploadError(msg, file, self.uploadExtraData, previewId, index) : self.showError(msg, file, previewId, index);
+                    var outData = {
+                        form: {},
+                        files: files,
+                        extra: self.uploadExtraData,
+                        response: {}
+                    };
+                    return self.isUploadable ? self.showUploadError(msg, outData, previewId, index) : self.showError(msg, file, previewId, index);
                 };
             function readFile(i) {
                 if (isEmpty($el.attr('multiple'))) {
@@ -1314,7 +1358,13 @@
                 numFiles = !isEmpty(files) ? (files.length + self.initialPreviewCount) : 1, tfiles,
                 ctr = self.filestack.length, isAjaxUpload = (self.isUploadable && ctr != 0),
                 throwError = function(msg, file, previewId, index) {
-                    return self.isUploadable ? self.showUploadError(msg, file, self.uploadExtraData, previewId, index) : self.showError(msg, file, previewId, index);
+                    var outData = {
+                        form: {},
+                        files: files,
+                        extra: self.uploadExtraData,
+                        response: {}
+                    };
+                    return self.isUploadable ? self.showUploadError(msg, outData, previewId, index) : self.showError(msg, file, previewId, index);
                 };
             self.resetUpload();