Migrate filepicker to filestack v2 API.

drichard · May 25, 2018 · a69c347 · a69c347
1 parent 3b79042
commit a69c347
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 43 deletions.
diff --git a/src/css/app.css b/src/css/app.css
@@ -727,3 +727,8 @@ html,body {
   font-weight: bold;
   color: gray;
 }
+
+#filepicker_shade {
+  z-index: 10000;
+  background: inherit;
+}
diff --git a/src/index.html b/src/index.html
@@ -53,8 +53,8 @@ <h1 class="title">{{html title}}</h1>
 
 <script id="template-open" type="text/x-jquery-tmpl">
 <div id="open-dialog" class="file-dialog" title="Open mind map">
-  <h1><span class="highlight">New!</span> From the Cloud: Dropbox and more</h1>
-  <p>Open, save and share your mind maps online in your favorite cloud storage. Supports Google Drive, Dropbox and more! Powered by <a href="http://www.filepicker.io" target="_blank">filepicker.io</a>.</p>
+  <h1><span class="highlight">Works again!</span> In the Cloud: Dropbox and more</h1>
+  <p>Open, save and share your mind maps online in your favorite cloud storage. Supports Google Drive, Dropbox and more! Powered by <a href="https://www.filestack.com/" target="_blank">filestack.com</a>.</p>
   <button id="button-open-cloud">Open</button>
   <span class="cloud-loading">Loading...</span>
   <span class="cloud-error error"></span>
@@ -82,9 +82,10 @@ <h1>From file</h1>
 
 <script id="template-save" type="text/x-jquery-tmpl">
 <div id="save-dialog" class="file-dialog" title="Save mind map">
-  <h1><span class="highlight">New!</span> In the Cloud: Dropbox and more</h1>
-  <p>Open, save and share your mind maps online in your favorite cloud storage. Supports Google Drive, Dropbox and more! Powered by <a href="http://www.filepicker.io" target="_blank">filepicker.io</a>.</p>
+  <h1><span class="highlight">Works again!</span> In the Cloud: Dropbox and more</h1>
+  <p>Open, save and share your mind maps online in your favorite cloud storage. Supports Google Drive, Dropbox and more! Powered by <a href="https://www.filestack.com/" target="_blank">filestack.com</a>.</p>
   <button id="button-save-cloudstorage">Save</button>
+  <span class="cloud-loading">Loading...</span>
   <span class="cloud-error error"></span>
   <div class="seperator"></div>
   <h1>Local Storage</h1>
@@ -223,7 +224,7 @@ <h2 class='image-description'>To download the map right-click the
   </div>
 
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
-  <script src="//api.filepicker.io/v0/filepicker.js"></script>
+  <script src="//api.filestackapi.com/filestack.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
 
   <!-- DEBUG -->

diff --git a/src/js/FilePicker.js b/src/js/FilePicker.js
@@ -10,29 +10,10 @@ mindmaps.FilePicker = function(eventBus, mindmapModel) {
   if (window.filepicker) {
     var filepicker = window.filepicker;
     filepicker.setKey('P9tQ4bicRwyIe8ZUsny5');
-
-    var mimetype = "application/json";
-
-    var openOptions = {
-      modal: true,
-      services: [
-        filepicker.SERVICES.GOOGLE_DRIVE,
-        filepicker.SERVICES.DROPBOX,
-        filepicker.SERVICES.BOX,
-        filepicker.SERVICES.URL
-      ]
-    };
-
-    var saveOptions = {
-      modal: true,
-      services: [
-        filepicker.SERVICES.GOOGLE_DRIVE,
-        filepicker.SERVICES.DROPBOX,
-        filepicker.SERVICES.BOX,
-      ]
-    };
   }
 
+  var mimetype = "application/json";
+
   /**
    * Shows the open dialog and tries to open a mindmap.
    */
@@ -44,13 +25,13 @@ mindmaps.FilePicker = function(eventBus, mindmapModel) {
       return;
     }
 
-    filepicker.getFile(mimetype, openOptions, function(url, data) {
-      // load callback
-      options.load && options.load();
+    // load callback
+    options.load && options.load();
 
+    function onSuccess(blob) {
       // load mindmap
       $.ajax({
-        url: url, 
+        url: blob.url, 
         success: function(data) {
 
           try {
@@ -79,13 +60,27 @@ mindmaps.FilePicker = function(eventBus, mindmapModel) {
           throw new Error('Error while loading map from filepicker. ' + textStatus + ' ' + errorThrown);
         }
       });
-    });
+    }
+
+    function onError(e) {
+      if (e.code === 101) {
+        // 101 - The user closed the dialog without picking a file.
+        options.cancel && options.cancel();
+      } else {
+        throw new Error(e);
+      }
+    }
+
+    filepicker.pick({
+      mimetype: mimetype,
+      container: 'modal',
+      openTo: 'DROPBOX',
+      services: ['COMPUTER', 'GOOGLE_DRIVE', 'DROPBOX', 'BOX', 'SKYDRIVE']
+    }, onSuccess, onError);
   };
 
   /**
-   * Shows the save dialog where the user can save the current mindmap. Skips
-   * the dialog and saves directly when options.saveAs = true is passed and
-   * a cloud storage file is currently open.
+   * Shows the save dialog where the user can save the current mindmap.
    */
   this.save = function(options) {
     options = options || {};
@@ -95,21 +90,39 @@ mindmaps.FilePicker = function(eventBus, mindmapModel) {
       return;
     }
 
-    var doc = mindmapModel.getDocument();
-    var data = doc.prepareSave().serialize()
+    // load callback
+    options.load && options.load();
+
+    var doc = mindmapModel.getDocument().prepareSave();
+    var data = doc.serialize();
 
-    var success = function(url) {
-      console.log('saved to:', url);
+    function onSuccess(blob) {
       eventBus.publish(mindmaps.Event.DOCUMENT_SAVED, doc);
 
       if (options.success) {
         options.success();
       }
-    };
+    }
+
+    function onError(e) {
+      if (e.code === 131) {
+        // 131 - The user closed the save dialog without picking a file.
+        options.cancel && options.cancel();
+      } else {
+        throw new Error(e);
+      }
+    }
+
+    var blob = new Blob([data], {type: 'application/json'});
 
-    // save dialog
-    filepicker.getUrlFromData(data, function(dataUrl) {
-      filepicker.saveAs(dataUrl, mimetype, saveOptions, success);
+    filepicker.store(blob, function (storedBlob) {
+      filepicker.exportFile(storedBlob.url, {
+        mimetype: mimetype,
+        suggestedFilename: doc.title,
+        container: 'modal',
+        openTo: 'DROPBOX',
+        services: ['DROPBOX', 'BOX', 'SKYDRIVE', 'GOOGLE_DRIVE']
+      }, onSuccess, onError);
     });
   }
 }
diff --git a/src/js/OpenDocument.js b/src/js/OpenDocument.js
@@ -114,16 +114,23 @@ mindmaps.OpenDocumentPresenter = function(eventBus, mindmapModel, view, filePick
    */
   view.openCloudButtonClicked = function(e) {
     mindmaps.Util.trackEvent("Clicks", "cloud-open");
+    mindmaps.Util.trackEvent("CloudOpen", "click");
 
     filePicker.open({
       load: function() {
         view.showCloudLoading();
       },
+      cancel: function () {
+        view.hideCloudLoading();
+        mindmaps.Util.trackEvent("CloudOpen", "cancel");
+      },
       success: function() {
         view.hideOpenDialog();
+        mindmaps.Util.trackEvent("CloudOpen", "success");
       },
       error: function(msg) {
         view.showCloudError(msg);
+        mindmaps.Util.trackEvent("CloudOpen", "error", msg);
       }
     });
   };

diff --git a/src/js/SaveDocument.js b/src/js/SaveDocument.js
@@ -61,8 +61,18 @@ mindmaps.SaveDocumentView = function() {
   };
 
   this.showCloudError = function(msg) {
+    $dialog.find('.cloud-loading').removeClass('loading');
     $dialog.find('.cloud-error').text(msg);
-  }
+  };
+
+  this.showCloudLoading = function() {
+    $dialog.find('.cloud-error').text('');
+    $dialog.find('.cloud-loading').addClass('loading');
+  };
+
+  this.hideCloudLoading = function() {
+    $dialog.find('.cloud-loading').removeClass('loading');
+  };
 };
 
 /**
@@ -83,13 +93,23 @@ mindmaps.SaveDocumentPresenter = function(eventBus, mindmapModel, view, autosave
   */
   view.cloudStorageButtonClicked = function() {
     mindmaps.Util.trackEvent("Clicks", "cloud-save");
+    mindmaps.Util.trackEvent("CloudSave", "click");
 
     filePicker.save({
+      load: function() {
+        view.showCloudLoading();
+      },
+      cancel: function () {
+        view.hideCloudLoading();
+        mindmaps.Util.trackEvent("CloudSave", "cancel");
+      },
       success: function() {
         view.hideSaveDialog();
+        mindmaps.Util.trackEvent("CloudSave", "success");
       },
       error: function(msg) {
         view.showCloudError(msg);
+        mindmaps.Util.trackEvent("CloudSave", "error", msg);
       }
     });
   };

diff --git a/src/js/Util.js b/src/js/Util.js
@@ -7,6 +7,8 @@ mindmaps.Util = mindmaps.Util || {};
  * Tracks an event to google analytics.
  */
 mindmaps.Util.trackEvent = function(category, action, label) {
+    console.log('trackEvent:', category, action, label || '');
+
     if (!window.gtag) {
       return;
     }