Improve asset uploading

GrapesJS · Aug 26, 2017 · c55a598 · c55a598
1 parent df5729a
commit c55a598
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 63 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -4,7 +4,10 @@
     "node": true
   },
   "parserOptions": {
-    "sourceType": "module"
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true
+    }
   },
   "rules": {
     "strict": 0,

diff --git a/dist/grapes.min.js b/dist/grapes.min.js
diff --git a/index.html b/index.html
@@ -868,10 +868,11 @@ <h1 class="bdg-title">The team</h1>
       },
 
       assetManager: {
-        storageType      : '',
-        storeOnChange    : true,
-        storeAfterUpload  : true,
-        assets        : [
+        upload: 'https://grapedrop.dev/asset-upload/testpage',
+        params: {
+          _token: 'pCYrSwjuiV0t5NVtZpQDY41Gn5lNUwo3it1FIkAj',
+        },
+        assets: [
            { type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg', height:350, width:250},
            { type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg', height:350, width:250},
            { type: 'image', src : 'http://placehold.it/350x250/79c267/fff/image3.jpg', height:350, width:250},

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.9.25",
+  "version": "0.9.26",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",
@@ -11,6 +11,7 @@
     "url": "https://github.com/artf/grapesjs.git"
   },
   "dependencies": {
+    "babel-preset-stage-3": "^6.24.1",
     "backbone": "^1.3.3",
     "backbone-undo": "^0.2.5",
     "codemirror": "^5.21.0",
@@ -26,6 +27,7 @@
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
     "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-3": "^6.24.1",
     "chai": "^3.5.0",
     "cross-env": "^5.0.4",
     "documentation": "^4.0.0-beta2",
@@ -54,9 +56,7 @@
     "editor"
   ],
   "babel": {
-    "presets": [
-      "es2015"
-    ]
+    "presets": [ "es2015", "stage-3"]
   },
   "scripts": {
     "lint": "eslint src",

diff --git a/src/asset_manager/config/config.js b/src/asset_manager/config/config.js
@@ -5,8 +5,10 @@ module.exports =  {
   // Style prefix
   stylePrefix: 'am-',
 
-  // Url where uploads will be send, set false to disable upload
-  upload: 'http://localhost/assets/upload',
+  // Upload endpoint, set `false` to disable upload
+  // upload: 'https://endpoint/upload/assets',
+  // upload: false,
+  upload: 0,
 
   // Custom headers to pass with the upload request
   headers: {},

diff --git a/src/asset_manager/view/FileUploader.js b/src/asset_manager/view/FileUploader.js
@@ -31,38 +31,52 @@ module.exports = Backbone.View.extend({
     this.delegateEvents();
   },
 
+  /**
+   * Triggered before the upload is started
+   * @private
+   */
   onUploadStart() {
     const em = this.config.em;
     em && em.trigger('asset:upload:start');
   },
 
-  onUploadEnd() {
+  /**
+   * Triggered after the upload is ended
+   * @param  {Object|string} res End result
+   * @private
+   */
+  onUploadEnd(res) {
     const em = this.config.em;
-    em && em.trigger('asset:upload:end');
+    em && em.trigger('asset:upload:end', res);
   },
 
+  /**
+   * Triggered on upload error
+   * @param  {Object} err Error
+   * @private
+   */
   onUploadError(err) {
     console.error(err);
     this.onUploadEnd(err);
   },
 
-  onUploadResponse(res) {
+  /**
+   * Triggered on upload response
+   * @param  {string} text Response text
+   * @private
+   */
+  onUploadResponse(text) {
     const em = this.config.em;
     const config = this.config;
     const target = this.target;
-    em && em.trigger('asset:upload:response', res);
+    const json = JSON.parse(text);
+    em && em.trigger('asset:upload:response', json);
 
     if (config.autoAdd && target) {
-      if ((req.status/200|0) == 1) {
-        const json = JSON.parse(req.responseText);
-        target.add(json.data);
-      } else {
-        onUploadError(res);
-        return;
-      }
+      target.add(json.data);
     }
 
-    this.onUploadEnd(res);
+    this.onUploadEnd(text);
   },
 
   /**
@@ -87,47 +101,20 @@ module.exports = Backbone.View.extend({
 
     var target = this.target;
     const url = config.upload;
-
     if (url) {
       this.onUploadStart();
       return fetch(url, {
         method: 'post',
         credentials: 'include',
         headers: config.headers,
         body: formData,
-      }).then(this.onUploadResponse)
-      .catch(this.onUploadError);
+      }).then(res => (res.status/200|0) == 1 ?
+        res.text() : res.text().then((text) =>
+          Promise.reject(text)
+        ))
+      .then((text) => this.onUploadResponse(text))
+      .catch(err => this.onUploadError(err));
     }
-
-    //onStart upload:start
-    //onEnd upload:end
-    //onResponse upload:response
-    //autoAdd
-    /*
-    $.ajax({
-      url      : this.config.upload,
-      type    : 'POST',
-      data    : formData,
-      beforeSend  : this.config.beforeSend,
-      complete  : this.config.onComplete,
-      xhrFields  : {
-        onprogress(e) {
-          if (e.lengthComputable) {
-            var result = e.loaded / e.total * 100 + '%';
-          }
-        },
-        onload(e) {
-            //progress.value = 100;
-        }
-      },
-      cache: false, contentType: false, processData: false
-    }).done(data => {
-      target.add(data.data);
-    }).always(() => {
-      //turnOff loading
-    });
-
-    */
   },
 
   /**

diff --git a/src/editor/index.js b/src/editor/index.js
@@ -39,7 +39,7 @@
  * * `component:styleUpdate:{propertyName}` - Listen for a specific style property change
  * * `asset:upload:start` - Before the upload is started
  * * `asset:upload:end` - After the upload is ended
- * * `asset:upload:response` - On upload response, passes a response object as the argument
+ * * `asset:upload:response` - On upload response, passes the result as an argument
  * * `styleManager:change` - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
  * * `styleManager:change:{propertyName}` - As above but for a specific style property
  * * `storage:load` - Triggered when something was loaded from the storage, loaded object passed as an argumnet

diff --git a/src/utils/fetch.js b/src/utils/fetch.js
@@ -12,7 +12,11 @@ export default typeof fetch == 'function' ? fetch.bind() : (url, options) => {
       req.setRequestHeader(k, options.headers[k]);
     }
 
-    req.onload = e => res(req);
+    req.onload = e => res({
+      status: req.status,
+      statusText: req.statusText,
+      text: () => Promise.resolve(req.responseText)
+    });
     req.onerror = rej;
 
     // Actually, fetch doesn't support onProgress feature

diff --git a/webpack.config.js b/webpack.config.js
@@ -34,8 +34,7 @@ module.exports = {
         test: /\.js$/,
         loader: 'babel-loader',
         include: /src/,
-        exclude: /node_modules/,
-        query: {presets: ['es2015']}
+        exclude: /node_modules/
     }],
   },
   resolve: {