Upgrade to release v4.0.0

README.md

@@ -3,7 +3,7 @@ bootstrap-fileinput
 
 An enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. This plugin is inspired by [this blog article](http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/) and [Jasny's File Input plugin](http://jasny.github.io/bootstrap/javascript/#fileinput). 
 The plugin enhances these concepts and simplifies the widget initialization with simple HTML markup on a file input. It offers support for previewing a 
-wide variety of files i.e. images, text, html, video, audio, flash, and objects. In addition, with release 4.0.0 the plugin now supports AJAX based uploads,and previewing, appending, or deleting files before upload.
+wide variety of files i.e. images, text, html, video, audio, flash, and objects.
 
 ![File Input Screenshot](https://lh3.googleusercontent.com/-3FiEmc_okc4/VBw_d2LBAJI/AAAAAAAAAL8/KbVj5X9Dus0/w596-h454-no/FileInput.jpg)
 
@@ -357,7 +357,7 @@ The `layoutTemplates` if not set will default to:
     actionDelete: '<button type="button" class="kv-file-remove {removeClass}" title="{removeTitle}"{dataUrl}{dataKey}>{removeIcon}</button>\n',
     actionUpload: '<button type="button" class="kv-file-upload {uploadClass}" title="{uploadTitle}">{uploadIcon}</button>\n'
 
-}
+};
 ```
 
 #### previewTemplates
@@ -570,7 +570,7 @@ _string_ the CSS class for the file upload button. Defaults to `btn btn-default`
 _string_ the title to display on hover for the file remove button. Defaults to `Upload selected files`.
 
 #### uploadUrl
-_string_ the URL for the upload processing action (typically for ajax based processing). Defaults to `null`. If this is not set or `null`, then the upload button action will default to form submission. NOTE: This is MANDATORY if you want to use advanced features like drag & drop, append/remove files, selectively upload files via ajax etc. The plugin automatically send `$_FILES` data to the server with the input `name` attribute as the key if provided. If input name is not set, the key defaults to `file-data`.
+_string_ the URL for the upload processing action (typically for ajax based processing). Defaults to `null`. If this is not set or `null`, then the upload button action will default to form submission. NOTE: This is MANDATORY if you want to use advanced features like drag & drop, append/remove files, selectively upload files via ajax etc.
 
 #### uploadExtraData
 _object_ the extra data that will be passed as data to the url/AJAX server call via POST.
@@ -766,21 +766,20 @@ _string_ CSS class for the drag & drop zone title. Defaults to `file-drop-zone-t
 
 #### fileActionSettings
 _object_ configuration for setting up file actions for newly selected file thumbnails in the preview window. The following properties can be set:
-
-- `removeIcon`: _string_, icon for remove button to be displayed in each file thumbnail.
-- `removeClass`: _string_, CSS class for the remove button in each file thumbnail.
-- `removeTitle`: _string_, title for remove button in each file thumbnail.
-- `uploadIcon`: _string_, icon for upload button to be displayed in each file thumbnail.
-- `uploadClass`: _string_, CSS class for the remove button in each file thumbnail.
-- `uploadTitle`: _string_, title for remove button in each file thumbnail.
-- `indicatorNew`: _string_, an indicator (HTML markup) for new pending upload displayed in each file thumbnail.
-- `indicatorSuccess`: _string_, an indicator (HTML markup) for successful upload displayed in each file thumbnail.
-- `indicatorError`: _string_, an indicator (HTML markup) for error in upload displayed in each file thumbnail.
-- `indicatorLoading`: _string_, an indicator (HTML markup) for ongoing upload displayed in each file thumbnail.
-- `indicatorNewTitle`: _string_, title to display on hover of indicator for new pending upload in each file thumbnail.
-- `indicatorSuccessTitle`: _string_, title to display on hover of indicator for successful in each file thumbnail.
-- `indicatorErrorTitle`: _string_, title to display on hover of indicator for error in upload in each file thumbnail.
-- `indicatorLoadingTitle`: _string_, title to display on hover of indicator for ongoing upload in each file thumbnail.
+    - `removeIcon`: _string_, icon for remove button to be displayed in each file thumbnail.
+    - `removeClass`: _string_, CSS class for the remove button in each file thumbnail.
+    - `removeTitle`: _string_, title for remove button in each file thumbnail.
+    - `uploadIcon`: _string_, icon for upload button to be displayed in each file thumbnail.
+    - `uploadClass`: _string_, CSS class for the remove button in each file thumbnail.
+    - `uploadTitle`: _string_, title for remove button in each file thumbnail.
+    - `indicatorNew`: _string_, an indicator (HTML markup) for new pending upload displayed in each file thumbnail.
+    - `indicatorSuccess`: _string_, an indicator (HTML markup) for successful upload displayed in each file thumbnail.
+    - `indicatorError`: _string_, an indicator (HTML markup) for error in upload displayed in each file thumbnail.
+    - `indicatorLoading`: _string_, an indicator (HTML markup) for ongoing upload displayed in each file thumbnail.
+    - `indicatorNewTitle`: _string_, title to display on hover of indicator for new pending upload in each file thumbnail.
+    - `indicatorSuccessTitle`: _string_, title to display on hover of indicator for successful in each file thumbnail.
+    - `indicatorErrorTitle`: _string_, title to display on hover of indicator for error in upload in each file thumbnail.
+    - `indicatorLoadingTitle`: _string_, title to display on hover of indicator for ongoing upload in each file thumbnail.
 
 Defaults to the following setting:
 ```js
@@ -938,11 +937,18 @@ This event is triggered after deletion of each thumbnail file in the `initialPre
 - `key`: the key passed within `initialPreviewConfig` for the selected file that will be passed as POST data to the `url`.
 
 ```js
-$('#input-id').on('filedeleted', function(event, key) {
+$('#input-id').on('filedelete', function(event, key) {
     console.log('Key = ' + key);
 });
 ```
 
+```js
+$('#input-id').on('fileunlock', function(event, filestack) {
+    var fstack = filestack.filter(function(n){ return n != undefined });
+    console.log('Files selected - ' + fstack.length);
+});
+```
+
 #### filedeleteerror
 This event is triggered when an error is faced in deletion of each thumbnail file in the `initialPreview` content set. Additional parameters available are: 
 
@@ -1032,18 +1038,6 @@ $('#input-id').fileinput('refresh');
 $('#input-id').fileinput('refresh', {browseLabel: 'Select...', removeLabel: 'Delete'});
 ```
 
-#### lock
-Locks the file input by disabling all actions/buttons except a cancel button to abort ongoing AJAX requests (for ajax uploads only).
-```js
-$('#input-id').fileinput('lock');
-```
-
-#### unlock
-Unlocks and enables the file input back again by reversing the outcome of the `lock` action.
-```js
-$('#input-id').fileinput('unlock');
-```
-
 ## License
 
 **bootstrap-fileinput** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details.

js/fileinput.js

@@ -7,7 +7,8 @@
  * 
  * The plugin drastically enhances the HTML file input to preview multiple files on the client before
  * upload. In addition it provides the ability to preview content of images, text, videos, audio, html, 
- * flash and other objects.
+ * flash and other objects. It also offers the ability to upload and delete files using AJAX, and add 
+ * files in batches (i.e. preview, append, or remove before upload).
  * 
  * Author: Kartik Visweswaran
  * Copyright: 2014, Kartik Visweswaran, Krajee.com
@@ -304,6 +305,7 @@
             self.options = options;
             self.setFileDropZoneTitle();
             self.uploadCount = 0;
+            self.uploadPercent = 0;
             self.$element.removeClass('file-loading');
         },
         getLayoutTemplate: function(t) {
@@ -346,23 +348,26 @@
                 }
                 self.$progress.removeClass('hide');
                 self.uploadCount = 0;
+                self.uploadPercent = 0;
                 var i, len = self.filestack.length, template = self.getLayoutTemplate('progress');
-                self.lock();
-                if (self.uploadAsync || totLen == 1 || self.showPreview) {
-                    for (i = 0; i < len; i++) {
-                        if (self.filestack[i] !== undefined) {
-                            self.upload(i, true);
+                setTimeout(function() {
+                    self.lock();
+                    self.setProgress(5);
+                    if ((self.uploadAsync || totLen == 1) && self.showPreview) {
+                        for (i = 0; i < len; i++) {
+                            if (self.filestack[i] !== undefined) {
+                                self.upload(i, true);
+                            }
                         }
+                        return;
                     }
-                    return;
-                }
-                self.setProgress(5);
-                self.uploadBatch();
+                    self.uploadBatch();
+                }, 100);
             });
         },
         setProgress: function(percent) {
-            var self = this, template = self.getLayoutTemplate('progress');
-            self.$progress.html(template.replace(/\{percent\}/g, percent));
+            var self = this, template = self.getLayoutTemplate('progress'), pct = Math.min(percent, 100);
+            self.$progress.html(template.replace(/\{percent\}/g, pct));
         },
         lock: function() {
             var self = this;
@@ -683,6 +688,7 @@
         resetUpload: function() {
             var self = this;
             self.uploadCount = 0;
+            self.uploadPercent = 0;
             self.setProgress(0);
             addCss(self.$progress, 'hide');
             self.ajaxRequests = [];
@@ -791,6 +797,21 @@
                 }
             });
         },
+        initXhr: function(xhrobj) {
+            var self = this;
+            if (xhrobj.upload) {
+                xhrobj.upload.addEventListener('progress', function(event) {
+                    var pct = 0, position = event.loaded || event.position, total = event.total;
+                    if (event.lengthComputable) {
+                        pct = Math.ceil(position / total * 98);
+                    }
+                    self.uploadPercent = Math.max(pct, self.uploadPercent);
+                    //Set progress
+                    self.setProgress(self.uploadPercent);
+                }, false);
+            }
+            return xhrobj;
+        },
         upload: function(i) {
             var self = this, files = self.getFileStack(), formdata = new FormData(),
                 previewId = self.previewInitId + "-" + i, $thumb = $('#' + previewId), 
@@ -815,7 +836,8 @@
                     }
                     self.uploadCount++;
                     var pct = total > 0 ? Math.ceil(self.uploadCount * 100/total) : 0;
-                    self.setProgress(pct);
+                    self.uploadPercent = Math.max(pct, self.uploadPercent);
+                    self.setProgress(self.uploadPercent);
                     self.initPreviewDeletes();
                 },
                 resetActions = function() {
@@ -828,6 +850,10 @@
             formdata.append('file_id', i);
             self.uploadExtra(formdata);
             self.ajaxRequests.push($.ajax({
+                xhr: function() {
+                    var xhrobj = $.ajaxSettings.xhr();
+                    return self.initXhr(xhrobj);
+                },
                 url: self.uploadUrl,
                 type: 'POST',
                 dataType: 'json',
@@ -882,14 +908,6 @@
                     $indicator.html(config[icon]);
                     $indicator.attr('title', config[msg]);
                 },
-                updateProgress = function() {
-                    if (self.$preview.find('file-uploading').length == 0) {
-                        self.unlock();
-                    }
-                    self.uploadCount++;
-                    var pct = total > 0 ? Math.ceil(self.uploadCount * 100/total) : 0;
-                    self.setProgress(pct);
-                },
                 setAllUploaded = function() {
                     $.each(files, function(key, data) {
                         self.filestack[key] = undefined;
@@ -902,6 +920,10 @@
             });
             self.uploadExtra(formdata);
             $.ajax({
+                xhr: function() {
+                    var xhrobj = $.ajaxSettings.xhr();
+                    return self.initXhr(xhrobj);
+                },
                 url: self.uploadUrl,
                 type: 'POST',
                 dataType: 'json',
@@ -935,7 +957,6 @@
                                 if (keys.length == 0) {
                                     $thumb.removeClass('file-uploading');
                                     setIndicator(key, 'indicatorError', 'indicatorErrorTitle');
-                                    updateProgress();
                                     return;
                                 }
                                 if ($.inArray(key, keys)) {
@@ -953,14 +974,16 @@
                             });
                             self.showUploadError(data.error, formdata, null, null, 'filebatchuploaderror');
                         }
-                        updateProgress();
-                    }, 500);
+                    }, 100);
+                },
+                complete: function () {
+                    self.setProgress(100);
+                    self.unlock();
                 },
                 error: function(jqXHR, textStatus, errorThrown) {
                     self.showError(errorThrown, formdata, null, null, 'filebatchuploaderror');
                     self.uploadFileCount = total - 1;
                     self.$preview.find('.file-preview-frame').removeClass('file-uploading');
-                    updateProgress();
                 }
             });
         },
@@ -1159,7 +1182,7 @@
                 }
                 if (!self.showPreview) {
                     $el.trigger('fileloaded', [file, previewId, i]);
-                    setTimeout(readFile(i + 1), 1000);
+                    setTimeout(readFile(i + 1), 500);
                     return;
                 }
                 if ($preview.length > 0 && typeof FileReader !== "undefined") {
@@ -1179,11 +1202,11 @@
                         setTimeout(function () {
                             $status.html(msg);
                             vUrl.revokeObjectURL(previewData);
-                        }, 1000);
+                        }, 500);
                         setTimeout(function () {
                             readFile(i + 1);
                             self.updateFileDetails(numFiles);
-                        }, 1500);
+                        }, 500);
                         $el.trigger('fileloaded', [file, previewId, i]);
                     };
                     reader.onprogress = function (data) {
@@ -1194,7 +1217,7 @@
                                 .replace(/\{percent\}/g, progress).replace(/\{name\}/g, caption);
                             setTimeout(function () {
                                 $status.html(msg);
-                            }, 1000);
+                            }, 500);
                         }
                     };
                     if (isText(file.type, caption)) {
@@ -1207,7 +1230,7 @@
                     setTimeout(function() {
                         readFile(i + 1);
                         self.updateFileDetails(numFiles);
-                    }, 1500);
+                    }, 500);
                     $el.trigger('fileloaded', [file, previewId, i]);
                 }
                 self.filestack.push(file);