Support for chunked and resumable file uploads

client/galaxy/scripts/apps/panels/tool-panel.js

@@ -2,6 +2,7 @@ import Tools from "mvc/tool/tools";
 import Upload from "mvc/upload/upload-view";
 import _l from "utils/localization";
 import ToolForm from "mvc/tool/tool-form-composite";
+import _ from "libs/underscore";
 
 var ToolPanel = Backbone.View.extend({
     initialize: function(page, options) {
@@ -28,7 +29,8 @@ var ToolPanel = Backbone.View.extend({
 
         // add upload modal
         this.upload_button = new Upload({
-            nginx_upload_path: config.nginx_upload_path,
+            upload_path: config.nginx_upload_path || `${Galaxy.root}api/tools`,
+            chunk_upload_size: config.chunk_upload_size,
             ftp_upload_site: config.ftp_upload_site,
             default_genome: config.default_genome,
             default_extension: config.default_extension
@@ -74,70 +76,54 @@ var ToolPanel = Backbone.View.extend({
 
     /** build a link to one tool */
     _templateTool: function(tool) {
-        return [
-            '<div class="toolTitle">',
-            '<a href="',
-            this.root,
-            tool.href,
-            '" target="galaxy_main">',
-            tool.title,
-            "</a>",
-            "</div>"
-        ].join("");
+        return `<div class="toolTitle">
+                    <a href="${Galaxy.root}${tool.href}" target="galaxy_main">
+                        ${tool.title}
+                    </a>
+                </div>`;
     },
 
     /** build a link to 'All Workflows' */
     _templateAllWorkflow: function(tool) {
-        return [
-            '<div class="toolTitle">',
-            // global
-            '<a href="',
-            Galaxy.root,
-            tool.href,
-            '">',
-            tool.title,
-            "</a>",
-            "</div>"
-        ].join("");
+        return `<div class="toolTitle">
+                    <a href="${Galaxy.root}${tool.href}">
+                        ${tool.title}
+                    </a>
+                </div>`;
     },
 
     /** build links to workflows in toolpanel */
     _templateWorkflowLink: function(wf) {
-        return [
-            '<div class="toolTitle">',
-            `<a class="${wf.cls} " href="`,
-            Galaxy.root,
-            wf.href,
-            '">',
-            wf.title,
-            "</a>",
-            "</div>"
-        ].join("");
+        return `<div class="toolTitle">
+                    <a class="${wf.cls}" href="${Galaxy.root}${wf.href}">
+                        ${_.escape(wf.title)}
+                    </a>
+                </div>`;
     },
 
     /** override to include inital menu dom and workflow section */
     _template: function() {
-        return [
-            '<div class="toolMenuContainer">',
-            '<div class="toolMenu" style="display: none">',
-            '<div id="search-no-results" style="display: none; padding-top: 5px">',
-            "<em><strong>",
-            _l("Search did not match any tools."),
-            "</strong></em>",
-            "</div>",
-            "</div>",
-            '<div class="toolSectionPad"/>',
-            '<div class="toolSectionPad"/>',
-            '<div class="toolSectionTitle" id="title_XXinternalXXworkflow">',
-            "<span>",
-            _l("Workflows"),
-            "</span>",
-            "</div>",
-            '<div id="internal-workflows" class="toolSectionBody">',
-            '<div class="toolSectionBg"/>',
-            "</div>",
-            "</div>"
-        ].join("");
+        return `<div class="toolMenuContainer">
+                    <div class="toolMenu" style="display: none">
+                        <div id="search-no-results" style="display: none; padding-top: 5px">
+                            <em>
+                                <strong>
+                                    ${_l("Search did not match any tools.")}
+                                </strong>
+                            </em>
+                        </div>
+                    </div>
+                    <div class="toolSectionPad"/>
+                    <div class="toolSectionPad"/>
+                    <div class="toolSectionTitle" id="title_XXinternalXXworkflow">
+                        <span>
+                            ${_l("Workflows")}
+                        </span>
+                    </div>
+                        <div id="internal-workflows" class="toolSectionBody">
+                            <div class="toolSectionBg"/>
+                        </div>
+                </div>`;
     },
 
     toString: function() {

client/galaxy/scripts/mvc/upload/collection/collection-view.js

@@ -116,7 +116,7 @@ export default Backbone.View.extend({
 
         // file upload
         this.uploadbox = this.$(".upload-box").uploadbox({
-            url: this.app.options.nginx_upload_path,
+            url: this.app.options.upload_path,
             announce: function(index, file) {
                 self._eventAnnounce(index, file);
             },

client/galaxy/scripts/mvc/upload/composite/composite-view.js

@@ -133,7 +133,7 @@ export default Backbone.View.extend({
             });
         });
         $.uploadpost({
-            url: this.app.options.nginx_upload_path,
+            url: this.app.options.upload_path,
             data: this.app.toData(this.collection.filter()),
             success: function(message) {
                 self._eventSuccess(message);

client/galaxy/scripts/mvc/upload/default/default-row.js

@@ -11,6 +11,7 @@ export default Backbone.View.extend({
         init: "upload-icon-button fa fa-trash-o",
         queued: "upload-icon fa fa-spinner fa-spin",
         running: "upload-icon fa fa-spinner fa-spin",
+        warning: "upload-icon fa fa-spinner fa-spin",
         success: "upload-icon-button fa fa-check",
         error: "upload-icon-button fa fa-exclamation-triangle"
     },
@@ -183,7 +184,7 @@ export default Backbone.View.extend({
     _refreshInfo: function() {
         var info = this.model.get("info");
         if (info) {
-            this.$info_text.html(`<strong>Failed: </strong>${info}`).show();
+            this.$info_text.html(`<strong>Warning: </strong>${info}`).show();
         } else {
             this.$info_text.hide();
         }
@@ -213,13 +214,17 @@ export default Backbone.View.extend({
             this.select_genome.disable();
             this.select_extension.disable();
         }
+        this.$info_progress.show();
+        this.$el.removeClass().addClass("upload-row");
         if (status == "success") {
             this.$el.addClass("success");
             this.$percentage.html("100%");
-        }
-        if (status == "error") {
+        } else if (status == "error") {
             this.$el.addClass("danger");
             this.$info_progress.hide();
+        } else if (status == "warning") {
+            this.$el.addClass("warning");
+            this.$info_progress.hide();
         }
     },
 

client/galaxy/scripts/mvc/upload/default/default-view.js

@@ -104,7 +104,7 @@ export default Backbone.View.extend({
 
         // file upload
         this.uploadbox = this.$uploadbox.uploadbox({
-            url: this.app.options.nginx_upload_path,
+            url: this.app.options.upload_path,
             announce: function(index, file) {
                 self._eventAnnounce(index, file);
             },
@@ -120,6 +120,9 @@ export default Backbone.View.extend({
             error: function(index, message) {
                 self._eventError(index, message);
             },
+            warning: function(index, message) {
+                self._eventWarning(index, message);
+            },
             complete: function() {
                 self._eventComplete();
             },
@@ -247,7 +250,7 @@ export default Backbone.View.extend({
     /** Progress */
     _eventProgress: function(index, percentage) {
         var it = this.collection.get(index);
-        it.set("percentage", percentage);
+        it.set({percentage: percentage, status: "running", info: ""});
         this.ui_button.model.set("percentage", this._uploadPercentage(percentage, it.get("file_size")));
     },
 
@@ -263,6 +266,12 @@ export default Backbone.View.extend({
         Galaxy.currHistoryPanel.refreshContents();
     },
 
+    /** Warning */
+    _eventWarning: function(index, message) {
+        var it = this.collection.get(index);
+        it.set({ status: "warning", info: message });
+    },
+
     /** Error */
     _eventError: function(index, message) {
         var it = this.collection.get(index);
@@ -363,7 +372,10 @@ export default Backbone.View.extend({
             this._uploadFtp();
 
             // queue remaining files
-            this.uploadbox.start();
+            this.uploadbox.start({
+                id: Galaxy.user.id,
+                chunk_upload_size: this.app.options.chunk_upload_size
+            });
             this.render();
         }
     },
@@ -430,7 +442,7 @@ export default Backbone.View.extend({
         if (list.length > 0) {
             $.uploadpost({
                 data: this.app.toData(list),
-                url: this.app.options.nginx_upload_path,
+                url: this.app.options.upload_path,
                 success: function(message) {
                     _.each(list, model => {
                         self._eventSuccess(model.id);
@@ -452,37 +464,37 @@ export default Backbone.View.extend({
 
     /** Template */
     _template: function() {
-        return (
-            '<div class="upload-view-default">' +
-            '<div class="upload-top">' +
-            '<h6 class="upload-top-info"/>' +
-            "</div>" +
-            '<div class="upload-box">' +
-            '<div class="upload-helper"><i class="fa fa-files-o"/>Drop files here</div>' +
-            '<table class="upload-table ui-table-striped" style="display: none;">' +
-            "<thead>" +
-            "<tr>" +
-            "<th>Name</th>" +
-            "<th>Size</th>" +
-            "<th>Type</th>" +
-            "<th>Genome</th>" +
-            "<th>Settings</th>" +
-            "<th>Status</th>" +
-            "<th/>" +
-            "</tr>" +
-            "</thead>" +
-            "<tbody/>" +
-            "</table>" +
-            "</div>" +
-            '<div class="upload-footer">' +
-            '<span class="upload-footer-title">Type (set all):</span>' +
-            '<span class="upload-footer-extension"/>' +
-            '<span class="upload-footer-extension-info upload-icon-button fa fa-search"/> ' +
-            '<span class="upload-footer-title">Genome (set all):</span>' +
-            '<span class="upload-footer-genome"/>' +
-            "</div>" +
-            '<div class="upload-buttons"/>' +
-            "</div>"
-        );
+        return  `<div class="upload-view-default">
+                    <div class="upload-top">
+                        <h6 class="upload-top-info"/>
+                    </div>
+                    <div class="upload-box">
+                        <div class="upload-helper">
+                            <i class="fa fa-files-o"/>Drop files here
+                        </div>
+                        <table class="upload-table ui-table-striped" style="display: none;">
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Size</th>
+                                    <th>Type</th>
+                                    <th>Genome</th>
+                                    <th>Settings</th>
+                                    <th>Status</th>
+                                    <th/>
+                                </tr>
+                            </thead>
+                            <tbody/>
+                        </table>
+                    </div>
+                    <div class="upload-footer">
+                        <span class="upload-footer-title">Type (set all):</span>
+                        <span class="upload-footer-extension"/>
+                        <span class="upload-footer-extension-info upload-icon-button fa fa-search"/>
+                        <span class="upload-footer-title">Genome (set all):</span>
+                        <span class="upload-footer-genome"/>
+                    </div>
+                    <div class="upload-buttons"/>
+                </div>`;
     }
 });

client/galaxy/scripts/mvc/upload/upload-view.js

@@ -9,7 +9,6 @@ import UploadViewComposite from "mvc/upload/composite/composite-view";
 import UploadViewCollection from "mvc/upload/collection/collection-view";
 export default Backbone.View.extend({
     options: {
-        nginx_upload_path: "",
         ftp_upload_site: "n/a",
         default_genome: "?",
         default_extension: "auto",