issue #44 multi file uploader with rename

1 files changed, 61 insertions, 3 deletions

diff --git a/lib/scripts/fileuploader.js b/lib/scripts/fileuploader.js
index 5368d9739..437984848 100644
--- a/lib/scripts/fileuploader.js
+++ b/lib/scripts/fileuploader.js
@@ -267,6 +267,7 @@ qq.FileUploaderBasic = function(o){
         onProgress: function(id, fileName, loaded, total){},
         onComplete: function(id, fileName, responseJSON){},
         onCancel: function(id, fileName){},
+        onUpload: function(){},
         // messages
         messages: {
             typeError: "{file} has invalid extension. Only {extensions} are allowed.",
@@ -335,6 +336,9 @@ qq.FileUploaderBasic.prototype = {
             onCancel: function(id, fileName){
                 self._onCancel(id, fileName);
                 self._options.onCancel(id, fileName);
+            },
+            onUpload: function(){
+                self._onUpload();
             }
         });
 
@@ -367,6 +371,9 @@ qq.FileUploaderBasic.prototype = {
     _onCancel: function(id, fileName){
         this._filesInProgress--;
     },
+    _onUpload: function(){
+        this._handler.uploadAll(this._options.params);
+    },
     _onInputChange: function(input){
         if (this._handler instanceof qq.UploadHandlerXhr){
             this._uploadFileList(input.files);
@@ -394,7 +401,6 @@ qq.FileUploaderBasic.prototype = {
 
         if (this._options.onSubmit(id, fileName) !== false){
             this._onSubmit(id, fileName);
-            this._handler.upload(id, this._options.params);
         }
     },
     _validateFile: function(file){
@@ -488,11 +494,13 @@ qq.FileUploader = function(o){
                 '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
                 '<div class="qq-upload-button">Upload a file</div>' +
                 '<ul class="qq-upload-list"></ul>' +
+                '<input class="button" type="submit" value="Upload" id="mediamanager__upload_button">' +
              '</div>',
 
         // template for one item in file list
         fileTemplate: '<li>' +
                 '<span class="qq-upload-file"></span>' +
+                '<label><span>Upload as (optional):</span><input class="qq-upload-name-input" type="text"></label>' +
                 '<span class="qq-upload-spinner"></span>' +
                 '<span class="qq-upload-size"></span>' +
                 '<a class="qq-upload-cancel" href="#">Cancel</a>' +
@@ -505,8 +513,9 @@ qq.FileUploader = function(o){
             drop: 'qq-upload-drop-area',
             dropActive: 'qq-upload-drop-area-active',
             list: 'qq-upload-list',
-
+            nameInput: 'qq-upload-name-input',
             file: 'qq-upload-file',
+
             spinner: 'qq-upload-spinner',
             size: 'qq-upload-size',
             cancel: 'qq-upload-cancel',
@@ -529,6 +538,7 @@ qq.FileUploader = function(o){
     this._button = this._createUploadButton(this._find(this._element, 'button'));
 
     this._bindCancelEvent();
+    this._bindUploadEvent();
     this._setupDragDrop();
 };
 
@@ -629,6 +639,10 @@ qq.extend(qq.FileUploader.prototype, {
         qq.setText(fileElement, this._formatFileName(fileName));
         this._find(item, 'size').style.display = 'none';
 
+        var nameElement = this._find(item, 'nameInput');
+        nameElement.value = this._formatFileName(fileName);
+        nameElement.id = id;
+
         this._listElement.appendChild(item);
     },
     _getItemByFileId: function(id){
@@ -660,6 +674,19 @@ qq.extend(qq.FileUploader.prototype, {
                 qq.remove(item);
             }
         });
+    },
+
+    _bindUploadEvent: function(){
+        var self = this,
+            list = this._listElement;
+
+        qq.attach(document.getElementById('mediamanager__upload_button'), 'click', function(e){
+            e = e || window.event;
+            var target = e.target || e.srcElement;
+            qq.preventDefault(e);
+            self._handler._options.onUpload();
+
+        });
     }
 });
 
@@ -877,6 +904,10 @@ qq.UploadHandlerAbstract.prototype = {
      * @returns id
      **/
     add: function(file){},
+
+    uploadAll: function(params){
+        this._uploadAll(params);
+    },
     /**
      * Sends the file identified by id and additional query params to the server
      */
@@ -927,6 +958,8 @@ qq.UploadHandlerAbstract.prototype = {
      * Actual upload method
      */
     _upload: function(id){},
+
+    _uploadAll: function(params){},
     /**
      * Actual cancel method
      */
@@ -1026,6 +1059,12 @@ qq.extend(qq.UploadHandlerForm.prototype, {
 
         return id;
     },
+    _uploadAll: function(params){
+        for (key in this._inputs) {
+            this.upload(key, params);
+        }
+
+    },
     _attachLoadEvent: function(iframe, callback){
         qq.attach(iframe, 'load', function(){
             // when we remove iframe from dom
@@ -1153,10 +1192,21 @@ qq.extend(qq.UploadHandlerXhr.prototype, {
     getName: function(id){
         var file = this._files[id];
         // fix missing name in Safari 4
-        return file.fileName != null ? file.fileName : file.name;
+        var name = document.getElementById(id);
+        if (name != null) {
+            return name.value;
+        } else {
+            if (file != null) {
+                // fix missing name in Safari 4
+                return file.fileName != null ? file.fileName : file.name;
+            } else {
+                return null;
+            }
+        }
     },
     getSize: function(id){
         var file = this._files[id];
+        if (file == null) return null;
         return file.fileSize != null ? file.fileSize : file.size;
     },
     /**
@@ -1173,6 +1223,7 @@ qq.extend(qq.UploadHandlerXhr.prototype, {
         var file = this._files[id],
             name = this.getName(id),
             size = this.getSize(id);
+        if (name == null || size == null) return;
 
         this._loaded[id] = 0;
 
@@ -1203,6 +1254,13 @@ qq.extend(qq.UploadHandlerXhr.prototype, {
         xhr.setRequestHeader("Content-Type", "application/octet-stream");
         xhr.send(file);
     },
+
+    _uploadAll: function(params){
+        for (key in this._files) {
+            this.upload(key, params);
+        }
+
+    },
     _onComplete: function(id, xhr){
         // the request was aborted/cancelled
         if (!this._files[id]) return;