[filebrowser] fix bug of upload. implemented clean API as documented

vispa/extensions/file/static/js/base/actions.js

@@ -416,19 +416,41 @@ define(["jquery", "jclass"], function($, JClass) {
       });
     },
 
-    upload: function(path, triggered) {
+    // The function takes up to two arguments.
+    // path: location of storage, default is current path
+    // files: list of files as FileList object. If not given, the browser's selector is used.
+    upload: function(path, files) {
       var self = this;
 
+      // set path
       if (!path) {
         path = this.FileBase.instance.getState("path");
       }
-
-      // progress bar
+      // setup progress bar container
       if (self.$progressBarContainer === undefined) {
         self.$progressBarContainer = $("<div class='upload-progress-container'></div>");
         self.$progressBarContainer.appendTo(self.FileBase.view.node);
       }
-      var progressTemplate = "<div class='progress-row'> \
+      // setup input
+      if (self.$input === undefined) {
+        self.$input = $("<input />");
+        self.$input.attr({
+          type: "file",
+          name: "files[]",
+          multiple: true
+        });
+      }
+      self.$input.fileupload({
+        dropZone: null,
+        maxChunkSize: vispa.args.global.max_request_body_size - 500,
+        url: vispa.url.dynamic("ajax/fs/upload?path=" + path +
+          "&_workspaceId=" + self.FileBase.instance.getWorkspaceId()),
+        start: function() {
+          self.$input.val(null);
+        },
+        submit: function(event, data) {
+          // create progress bar and save it in data
+          data.$progress = $("<div class='progress-row'> \
                                 <div class='progress-title'></div> \
                                 <div class='glyphicon glyphicon-remove'></div> \
                                 <div class='btn btn-xs btn-danger'><i class='glyphicon glyphicon-stop'></i>abort</div> \
@@ -438,24 +460,7 @@ define(["jquery", "jclass"], function($, JClass) {
                                     0% \
                                   </div> \
                                 </div> \
-                              </div>";
-
-      //input
-      var jqXHR = null;
-      var $input = $("<input />");
-      $input.attr({
-        type: "file",
-        name: "files[]",
-        multiple: true
-      });
-      $input.fileupload({
-        // dropZone: null,
-        maxChunkSize: vispa.args.global.max_request_body_size - 500,
-        url: vispa.url.dynamic("ajax/fs/upload?path=" + path +
-          "&_workspaceId=" + self.FileBase.instance.getWorkspaceId()),
-        submit: function(event, data) {
-          // create progress bar and save it in data
-          data.$progress = $(progressTemplate);
+                              </div>");
           data.$progress.appendTo(self.$progressBarContainer);
           $(".progress-title", data.$progress).html(data.files[0].name);
           // abort button
@@ -468,6 +473,12 @@ define(["jquery", "jclass"], function($, JClass) {
             data.$progress.remove();
           })
         },
+        progress: function(event, data) {
+          var percentage = parseInt(data.loaded / data.total * 100, 10);
+          $(".progress-bar", data.$progress).attr("aria-valuenow", percentage);
+          $(".progress-bar", data.$progress).css("width", percentage + "%");
+          $(".progress-bar", data.$progress).html(percentage + "%");
+        },
         done: function(event, data) {
           $(".progress-bar", data.$progress).toggleClass("progress-bar-primary progress-bar-success");
           vispa.messenger.info("Upload succeeded", "glyphicon glyphicon-ok-sign");
@@ -485,18 +496,16 @@ define(["jquery", "jclass"], function($, JClass) {
           setTimeout(function() {
             data.$progress.remove();
           }, 3000);
-        },
-        progress: function(event, data) {
-          var percentage = parseInt(data.loaded / data.total * 100, 10);
-          $(".progress-bar", data.$progress).attr("aria-valuenow", percentage);
-          $(".progress-bar", data.$progress).css("width", percentage + "%");
-          $(".progress-bar", data.$progress).html(percentage + "%");
-        },
-        stop: function() {
-          $input.remove();
         }
       });
-      if (!triggered) $input.trigger("click");
+
+      // trigger upload, use browser selector of <input /> if files are not given
+      if (!files) {
+        self.$input.click();
+      } else {
+        self.$input.fileupload("add", {files: files})
+      }
+
     },
 
     filter: function() {

vispa/extensions/file/static/js/base/events.js

@@ -274,7 +274,7 @@ define(["jquery", "jclass"], function($, JClass) {
           } else {
             path = self.FileBase.instance.getState("path");
           }
-          self.FileBase.actions.upload(path, true);
+          self.FileBase.actions.upload(path, event.originalEvent.dataTransfer.files);
         }
         // if transfered data not empty: move file
         else {
@@ -369,7 +369,7 @@ define(["jquery", "jclass"], function($, JClass) {
         $bkg.toggleClass("dragover", false);
         // if files attachted, upload them
         if (event.originalEvent.dataTransfer.files.length !== 0) {
-          self.FileBase.actions.upload(null, true);
+          self.FileBase.actions.upload(null, event.originalEvent.dataTransfer.files);
         }
       });
     }