[WebUI] Allow multiple torrent uploads in Add dialog

Add a new `multiple` field to FileUploadField to allow selecting
multiple files. Include a fallback for if browser does not support
multiple file selection.

Update Add window to upload and parse multiple torrent files at once.

3 files changed, 45 insertions, 17 deletions

diff --git a/deluge/ui/web/js/deluge-all/add/AddWindow.js b/deluge/ui/web/js/deluge-all/add/AddWindow.js
index c5c219125..dc88f34a4 100644
--- a/deluge/ui/web/js/deluge-all/add/AddWindow.js
+++ b/deluge/ui/web/js/deluge-all/add/AddWindow.js
@@ -127,6 +127,7 @@ Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, {
                                 xtype: 'fileuploadfield',
                                 id: 'torrentFile',
                                 name: 'file',
+                                multiple: true,
                                 buttonCfg: {
                                     iconCls: 'x-deluge-add-file',
                                     text: _('File'),
@@ -241,34 +242,51 @@ Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, {
 
     onFileSelected: function() {
         if (this.fileUploadForm.isValid()) {
-            this.torrentId = this.createTorrentId();
+            var torrentIds = [];
+            var files = this.fileUploadForm.findField('torrentFile').value;
+            var randomId = this.createTorrentId();
+            Array.prototype.forEach.call(
+                files,
+                function(file, i) {
+                    // Append index for batch of unique torrentIds.
+                    var torrentId = randomId + i.toString();
+                    torrentIds.push(torrentId);
+                    this.onTorrentBeforeAdd(torrentId, file.name);
+                }.bind(this)
+            );
             this.fileUploadForm.submit({
                 url: deluge.config.base + 'upload',
                 waitMsg: _('Uploading your torrent...'),
                 success: this.onUploadSuccess,
                 scope: this,
+                torrentIds: torrentIds,
             });
-            var name = this.fileUploadForm.findField('torrentFile').value;
-            name = name.split('\\').slice(-1)[0];
-            this.onTorrentBeforeAdd(this.torrentId, name);
         }
     },
 
     onUploadSuccess: function(fp, upload) {
-        if (upload.result.success) {
-            var filename = upload.result.files[0];
-            this.fileUploadForm.findField('torrentFile').setValue('');
-            deluge.client.web.get_torrent_info(filename, {
-                success: this.onGotInfo,
-                scope: this,
-                filename: filename,
-            });
+        if (!upload.result.success) {
+            this.clear();
+            return;
         }
+
+        upload.result.files.forEach(
+            function(filename, i) {
+                deluge.client.web.get_torrent_info(filename, {
+                    success: this.onGotInfo,
+                    scope: this,
+                    filename: filename,
+                    torrentId: upload.options.torrentIds[i],
+                });
+            }.bind(this)
+        );
+        this.fileUploadForm.reset();
     },
 
     onGotInfo: function(info, obj, response, request) {
         info.filename = request.options.filename;
-        this.onTorrentAdd(this.torrentId, info);
+        torrentId = request.options.torrentId;
+        this.onTorrentAdd(torrentId, info);
     },
 
     onTorrentBeforeAdd: function(torrentId, text) {
diff --git a/deluge/ui/web/js/deluge-all/add/Window.js b/deluge/ui/web/js/deluge-all/add/Window.js
index a58cf91fc..9cb2bff49 100644
--- a/deluge/ui/web/js/deluge-all/add/Window.js
+++ b/deluge/ui/web/js/deluge-all/add/Window.js
@@ -24,6 +24,6 @@ Deluge.add.Window = Ext.extend(Ext.Window, {
      * Create an id for the torrent before we have any info about it.
      */
     createTorrentId: function() {
-        return new Date().getTime();
+        return new Date().getTime().toString();
     },
 });
diff --git a/deluge/ui/web/js/extjs/ext-extensions/form/FileUploadField.js b/deluge/ui/web/js/extjs/ext-extensions/form/FileUploadField.js
index ea3273939..57a3ea2b3 100644
--- a/deluge/ui/web/js/extjs/ext-extensions/form/FileUploadField.js
+++ b/deluge/ui/web/js/extjs/ext-extensions/form/FileUploadField.js
@@ -29,6 +29,13 @@ Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {
      * (defaults to 3).  Note that this only applies if {@link #buttonOnly} = false.
      */
     buttonOffset: 3,
+
+    /**
+     * @cfg {Boolean} multiple True to select more than one file. (defaults to false).
+     * Note that this only applies if the HTML doc is using HTML5.
+     */
+    multiple: false,
+
     /**
      * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
      */
@@ -114,9 +121,11 @@ Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {
                 ]);
             },
             change: function() {
-                var v = this.fileInput.dom.value;
-                this.setValue(v);
-                this.fireEvent('fileselected', this, v);
+                var value = this.fileInput.dom.files;
+                // Fallback to value.
+                if (!value) value = this.fileInput.dom.value;
+                this.setValue(value);
+                this.fireEvent('fileselected', this, value);
             },
         });
     },
@@ -130,6 +139,7 @@ Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {
             type: 'file',
             size: 1,
         });
+        this.fileInput.dom.multiple = this.multiple;
     },
 
     reset: function() {