瀏覽代碼

[home2] Add upload functionality

As we now only support IE10+ I've changed this one to an ajax file upload, so no need for the redirect anymore.
Johan Ahlen 10 年之前
父節點
當前提交
c1ae8c7

+ 37 - 0
desktop/core/src/desktop/static/desktop/js/assist/assistHelper.js

@@ -242,6 +242,43 @@
       .fail(self.assistErrorCallback(options));
   };
 
+  /**
+   * @param {Object} options
+   * @param {Function} options.successCallback
+   * @param {Function} [options.errorCallback]
+   * @param {Function} [options.progressHandler]
+   * @param {boolean} [options.silenceErrors]
+   *
+   * @param {FormData} options.formData
+   */
+  AssistHelper.prototype.uploadDocument = function (options) {
+    var self = this;
+    $.ajax({
+      url: '/desktop/api2/doc/import',
+      type: 'POST',
+      success: function (data) {
+        if (! self.successResponseIsError(data)) {
+          options.successCallback(data);
+        } else {
+          self.assistErrorCallback(options)(data);
+        }
+      },
+      xhr: function() {
+        var myXhr = $.ajaxSettings.xhr();
+        if(myXhr.upload && options.progressHandler) {
+          myXhr.upload.addEventListener('progress', options.progressHandler, false);
+        }
+        return myXhr;
+      },
+      dataType: 'json',
+      data: options.formData,
+      cache: false,
+      contentType: false,
+      processData: false
+    })
+      .fail(self.assistErrorCallback(options));
+  };
+
   /**
    * @param {Object} options
    * @param {Function} options.successCallback

+ 44 - 0
desktop/core/src/desktop/static/desktop/js/documents/hueDirectory.js

@@ -47,6 +47,11 @@
     self.loaded = ko.observable(false);
     self.loading = ko.observable(false);
     self.hasErrors = ko.observable(false);
+
+    self.uploading = ko.observable(false);
+    self.uploadComplete = ko.observable(false);
+    self.uploadFailed = ko.observable(false)
+
     self.open = ko.observable(false);
     self.entries = ko.observableArray([]);
 
@@ -116,6 +121,45 @@
     }
   };
 
+  HueDirectory.prototype.closeUploadModal = function () {
+    var self = this;
+    if (self.app === 'documents') {
+      $('#importDocumentsModal').modal('hide');
+      $('#importDocumentInput').val('');
+    }
+    // Allow the modal to hide
+    window.setTimeout(function () {
+      self.uploading(false);
+      self.uploadComplete(false);
+      self.uploadFailed(false);
+    }, 400);
+  };
+
+  HueDirectory.prototype.upload = function () {
+    var self = this;
+    if (self.app === 'documents') {
+      self.uploading(true);
+      self.uploadComplete(false);
+      self.uploadFailed(false);
+      self.assistHelper.uploadDocument({
+        formData: new FormData($('#importDocumentsForm')[0]),
+        successCallback: function () {
+          self.uploading(false);
+          self.uploadComplete(true);
+          self.load();
+        },
+        progressHandler: function (event) {
+          $("#importDocumentsProgress").val(Math.round((event.loaded / event.total) * 100));
+        },
+        errorCallback: function () {
+          self.uploading(false);
+          self.uploadComplete(true);
+          self.uploadFailed(true);
+        }
+      });
+    }
+  };
+
   HueDirectory.prototype.createDirectory = function (name) {
     var self = this;
     if (self.app === 'documents') {

+ 36 - 1
desktop/core/src/desktop/templates/file_browser.mako

@@ -148,6 +148,39 @@ from desktop.views import _ko
   </style>
 
   <script type="text/html" id="fb-template">
+    <div id="importDocumentsModal" class="modal hide fade fileupload-modal">
+      <!-- ko with: currentDirectory -->
+      <div class="modal-header">
+        <a href="#" class="close" data-clear="importDocumentsForm" data-bind="click: closeUploadModal">&times;</a>
+        <h3>${_('Import Hue documents')}</h3>
+      </div>
+        <div class="modal-body form-horizontal">
+          <form id="importDocumentsForm" style="display: inline" enctype="multipart/form-data">
+            <div class="control-group" data-bind="visible: !uploading() && !uploadComplete()">
+              <label class="control-label" for="importDocumentInput">${ _('Select json file') }</label>
+              <div class="controls">
+                <input id="importDocumentInput" style="line-height: 10px; margin-top: 5px;" type="file" name="documents" accept=".json" />
+              </div>
+            </div>
+            <span data-bind="visible: !uploadFailed() && uploadComplete()">${ _('Import complete!') }</span>
+            <span data-bind="visible: uploadFailed">${ _('Import failed!') }</span>
+            <progress data-bind="visible: uploading() || uploadComplete()" id="importDocumentsProgress" value="0" max="100" style="width: 560px;"></progress>
+            ${ csrf_token(request) | n,unicode }
+            <input type="hidden" name="path" data-bind="value: path" />
+          </form>
+        </div>
+        <div class="modal-footer">
+          <!-- ko ifnot: uploading() || uploadComplete() -->
+          <a href="#" class="btn" data-clear="importDocumentsForm" data-bind="click: closeUploadModal">${ _('Cancel') }</a>
+          <a herf="#" class="btn btn-danger" data-bind="click: upload">${ _('Import') }</a>
+          <!-- /ko -->
+          <!-- ko if: uploading() || uploadComplete() -->
+          <a href="#" class="btn" data-clear="importDocumentsForm" data-bind="click: closeUploadModal">${ _('Close') }</a>
+          <!-- /ko -->
+        </div>
+
+      <!-- /ko -->
+    </div>
     <div id="createDirectoryModal" class="modal hide fade">
       <!-- ko with: currentDirectory -->
       <div class="modal-body form-horizontal">
@@ -225,7 +258,9 @@ from desktop.views import _ko
           <!-- /ko -->
           <a class="inactive-action fb-action" href="javascript:void(0);"><i class="fa fa-fw fa-users"></i></a>
           <a class="inactive-action fb-action" href="javascript:void(0);"><i class="fa fa-fw fa-download"></i></a>
-          <a class="inactive-action fb-action" href="javascript:void(0);"><i class="fa fa-fw fa-upload"></i></a>
+          <!-- ko if: app === 'documents' -->
+          <a class="inactive-action fb-action" href="javascript:void(0);" data-bind="click: function () { $('#importDocumentsModal').modal('show'); }"><i class="fa fa-fw fa-upload"></i></a>
+          <!-- /ko -->
         </div>
       </div>
       <div class="fb-header">

+ 1 - 5
desktop/core/src/desktop/templates/home2.mako

@@ -211,10 +211,6 @@ ${ fileBrowser.fileBrowser() }
 ##           <a class="share-link btn" data-bind="click: exportDocuments">
 ##             <i class="fa fa-download"></i> ${ _('Export') }
 ##           </a>
-##
-##           <a data-bind="click: function() { $('#import-documents').modal('show'); }" class="btn">
-##             <i class="fa fa-upload"></i> ${ _('Import') }
-##           </a>
 ##         </div>
         <div class="file-browser" data-bind="component: {
           name: 'file-browser',
@@ -236,7 +232,7 @@ ${ fileBrowser.fileBrowser() }
 </script>
 
 ## ${ commonshare2() | n,unicode }
-${ commonimportexport(request) | n,unicode }
+## ${ commonimportexport(request) | n,unicode }
 
 <script type="text/javascript" charset="utf-8">
   require([