@widgetic/editor 3.10.55 → 3.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widgetic/editor",
-  "version": "3.10.55",
+  "version": "3.11.1",
   "scripts": {
     "start": "webpack --config webpack.config.js --watch --progress",
     "build": "webpack --config webpack.config.js",
@@ -58,7 +58,7 @@
     "svelte": "^1.22.5",
     "svelte-loader": "^1.3.0",
     "uglify-js": "^2.8.7",
-    "uglifyjs-webpack-plugin": "^0.3.0",
+    "uglifyjs-webpack-plugin": "^1.3.0",
     "virtual-dom": "^2.1.1",
     "webpack": "^3.0.0",
     "webpack-bundle-analyzer": "^2.3.0",
@@ -67,7 +67,8 @@
   "dependencies": {
     "http-server": "^0.11.1",
     "json-logic-js": "^1.2.2",
-    "soundcloud": "^3.3.2"
+    "soundcloud": "^3.3.2",
+    "tus-js-client": "^4.1.0"
   },
   "volta": {
     "node": "12.22.2"

package/src/core/services/uploads.js

@@ -24,8 +24,10 @@ File.defaults = {
 };
 File.guid = 0;
 
-const parseType = type =>
-  type.indexOf('/') > 0 ? type.slice(0, type.indexOf('/')) : type;
+const parseType = type => type.indexOf('/') > 0 ? type.slice(0, type.indexOf('/')) : type;
+
+// const root = "http://127.0.0.1:8091"; // for local development
+const root = ''; // (empty) for running on https://widgetic.com/upload
 
 export default class UploadService extends EventsMixin(Service) {
   constructor(user, token) {
@@ -41,6 +43,9 @@ export default class UploadService extends EventsMixin(Service) {
     // max file size in MB
     this.maxFilesize = user.premium ? 250 : 25; // MB limit / file for premium / free plan
 
+    // chunk size in MB
+    this.chunkSize = 90; // MB to go over Cloudflare's 100MB limit
+
     // max quota in bytes
     this.quota = (user.premium ? 10000 : 250) * 1000 * 1000; // total quota for premium / free plan
     
@@ -54,8 +59,16 @@ export default class UploadService extends EventsMixin(Service) {
     return this.maxFilesize;
   }
 
+  getChunkSize() {
+    return this.chunkSize;
+  }
+
   getUploadURL() {
-    return '/upload?user=' + this.user;
+    let url = root + '/upload?user=' + this.user;
+
+    // console.log("getUploadURL:", url);
+
+    return url;
   }
 
   getAuthHeaders() {
@@ -63,10 +76,15 @@ export default class UploadService extends EventsMixin(Service) {
   }
 
   getFiles(type) {
+    // console.log("getting files:", this.files);
     type = parseType(type);
+
+    // if files for this type were already fetched, return them
     if (this.refreshed[type])
       return Promise.resolve(this.files.filter(f => f.type === type));
 
+    // otherwise fetch them
+    // console.log("fetching files for type:", type);
     return this._fetch(type)
       .then(files => {
         // console.log('fetched files:', files)
@@ -80,8 +98,13 @@ export default class UploadService extends EventsMixin(Service) {
     return this.files.filter(file => file.id === id)[0];
   }
 
+  getUser() {
+    return this.user;
+  }
+
+  // when the upload starts: create a new File instance and push it to the files array
   upload(uploadFile) {
-    // console.log("on upload file:", uploadFile);
+    console.log("Uploads Service onUploadStart:", uploadFile);
 
     // create a new File instance from the uploadFile 
     let file = new File({
@@ -104,29 +127,37 @@ export default class UploadService extends EventsMixin(Service) {
     this._broadcast.update();
   }
 
+  // when the upload is complete: update the file in the files array with the data from the server
   uploadComplete(uploadFile, instanceId) {
-    // console.log("uploadComplete file:", uploadFile);
+    // console.log("Uploads Service uploadComplete:", uploadFile);
 
+    // if the upload failed, show an error
     if (uploadFile.status === 'error') return;
 
-    // read metadata from the file that's on the server
-    const response = JSON.parse(uploadFile.xhr.response);
-    // console.log("uploadComplete server response:", response);
-    
-    // read file from the response
+    // read the response string from the request
+    let responseText = uploadFile.xhr && uploadFile.xhr.response ? uploadFile.xhr.response : "";
+    if(!responseText) {
+      console.error("Error parsing uploadComplete response:", error);
+      return this.setError(uploadFile, 'Error uploading file!');
+    }
+
+    // read server file from the response
+    const response = JSON.parse(responseText);
     let serverFile = response.files.data[0];
     // console.log("uploadComplete file on the server:", serverFile);
 
-    // read quota from response
+    // read quota from response to update the used quota in dropzone
     // this.quota = response.quota.max;
     this.used = response.quota.used;
 
+    // console.log("Upload Service uploadComplete update file to complete:", uploadFile, serverFile);
+
     // update the file in the files array with the data from the server
     this._update(uploadFile, f => {
       f.state = 'complete';
       f.id = serverFile.id;
       f.path = serverFile.path;
-      f.url = response.hostUrl + f.path;
+      f.url = response.hostUrl + serverFile.path;
       f.lastModified = serverFile.lastModified;
     });
 
@@ -135,10 +166,15 @@ export default class UploadService extends EventsMixin(Service) {
   }
 
   accept(file, done) {
+    // console.log("Editor accept file:", file, done);
+
+    // if with the file size the quota is not exceeded, accept the file
     // this.used was increased by adding file.size in the `upload` method
     if (this.used < this.quota) {
       return done();
     }
+
+    // if the file exceeds the quota show an error
     done(
       `The file exceeds the quota by ${prettyBytes(this.used - this.quota)}.`
     );
@@ -155,29 +191,49 @@ export default class UploadService extends EventsMixin(Service) {
   }
 
   setThumbnail(file, thumbnail) {
+    console.log("Uploads Service setThumbnail:", file, thumbnail);
     this._update(file, f => f.thumbnail = thumbnail);
   }
 
   setError(file, error) {
     this.used -= file.size;
-    this._update(file, f => {
-      f.error = error;
-      f.size = 0;
-    });
+
+    this._update(file, f => { f.error = error; f.size = 0; });
   }
 
   setUploadProgress(file, percentage, size) {
     this._update(file, f => f.progress = percentage);
+    // console.log("Uploads Service setUploadProgress:", percentage, file.state);
   }
 
   setUploadState(file, state) {
+    // console.log("Uploads Service setUploadState:", state);
     this._update(file, f => f.state = state);
   }
 
   _update(file, transform) {
+
+    // console.log("Uploads Service _update file:", transform);
+
     // apply the transform function to the file in the array
     this.files = this.files.map(f => {
-      if (f.uploadFile === file) transform(f);
+      let fl = f.uploadFile ? f.uploadFile : f;
+
+      let equal = fl.name === file.name && 
+                  fl.size === file.size && 
+                  fl.lastModified === file.lastModified;
+
+      // console.log("Uploads Service _update compare:", equal, file, fl);
+
+      // if the file is the one to update, apply the transform function
+      // if (f.uploadFile === file)
+      if(equal) 
+      {
+        // console.log("Uploads Service _update file found:", file, fl);
+        transform(f);
+        // console.log("Uploads Service _update file found:", f);
+      }
+
       return f;
     });
 
@@ -185,10 +241,12 @@ export default class UploadService extends EventsMixin(Service) {
     this._broadcast.update();
   }
 
+  // fetch files from the server for the user
   _fetch(type) {
+    // console.log("fetching files for type:", type);
     return jQuery
       .ajax({
-        url: `/upload/?user=${this.user}&type=${type}`,
+        url: root + `/upload/?user=${this.user}&type=${type}`,
         headers: this.getAuthHeaders(),
       })
       .then(response => {

package/src/editor/content/browser/dropzone.html

@@ -73,6 +73,9 @@ import Dropzone from 'dropzone';
 import Service from './service.html';
 import prettyBytes from 'pretty-bytes';
 
+// Third party libraries imports
+import * as tus from 'tus-js-client';
+
 export default {
   components: { Service },
   data() {
@@ -82,7 +85,8 @@ export default {
       quota: 0,
       uploading: { total: 0, now: 0 },
       dragging: false,
-      maxFilesize: 10,
+      maxFilesize: 10, // in MB default
+      chunkSize: 0, // 0 by default, so no chunking
       instanceId: 0,
     };
   },
@@ -92,22 +96,31 @@ export default {
   },
   oncreate() {
     this.Uploads = this.refs.Uploads.instance();
+
+    // read the quota and used space from the Uploads service
     this.set({ quota: this.Uploads.quota, used: this.Uploads.used });
 
+    // check if should process uploads with XHR depending on the chunkSize
+    const autoProcessQueue = !this.get('chunkSize');
+    // console.log("Dropzone oncreate autoProcessQueue:", autoProcessQueue);
+
+    // Initialize Dropzone component
     this.dropzone = new Dropzone(this.refs.dropzone, {
-      acceptedFiles: this.get('filetypes'),
+      acceptedFiles: this.get('filetypes') || 'application/offset+octet',
       url: this.Uploads.getUploadURL(),
       headers: this.Uploads.getAuthHeaders(),
       accept: this.Uploads.accept.bind(this.Uploads),
       uploadMultiple: false,
       maxFilesize: this.get('maxFilesize'),
+      // Disable the default XHR upload handler to use TUS instead
+      autoProcessQueue: autoProcessQueue,
     });
 
     const events = {
       dragenter: this._onDragEnter.bind(this),
       dragleave: this._onDragLeave.bind(this),
       drop: this._onDragLeave.bind(this),
-      addedfile: this._onAddedFile.bind(this),
+      addedfile: this._onUploadStart.bind(this),
       thumbnail: this._onThumbnail.bind(this),
       error: this._onError.bind(this),
       uploadprogress: this._onUploadProgress.bind(this),
@@ -116,7 +129,7 @@ export default {
       success: this._updateFileState.bind(this, 'success'),
       complete: this._updateFileState.bind(this, 'complete'),
       canceled: this._updateFileState.bind(this, 'canceled'),
-      complete: this._onComplete.bind(this),
+      complete: this._onUploadComplete.bind(this),
       totaluploadprogress: this._onTotalUploadProgress.bind(this),
       queuecomplete: this._onQueueComplete.bind(this),
     };
@@ -135,25 +148,94 @@ export default {
       this.set({ dragging: false });
       this.fire('dragging', false);
     },
-    _onAddedFile(file) {
-      this.fire('new');
+    _onUploadStart(file) {
+      console.log("Dropzone _onUploadStart file:", file);
+
+      // get the chunk size from the component
+      const chunkSize = this.get('chunkSize');
+      console.log("Dropzone _onUploadStart chunkSize:", chunkSize);
+
+      /* Initialize TUS upload */
+      if(chunkSize) {
+        const upload = new tus.Upload(file, {
+          endpoint: this.Uploads.getUploadURL(),
+          headers: this.Uploads.getAuthHeaders(),
+          retryDelays: [0, 3000, 5000, 10000, 20000],
+          chunkSize: chunkSize * 1024 * 1024, // in MB
+          metadata: {
+            filename: file.name,
+            filetype: file.type,
+          },
+          onError: (error) => {
+            // console.error("Failed because: " + error);
+            this._onError(file, error);
+          },
+          onProgress: (bytesUploaded, bytesTotal) => {
+            const percentage = (bytesUploaded / bytesTotal * 100);//.toFixed(2);
+            // console.log("Dropzone TUS Client Progress:", percentage);
+            this._onUploadProgress(file, percentage, bytesUploaded);
+          },
+          onSuccess: (payload) => {
+            // console.log("Dropzone TUS Client onSuccess:", upload);
+
+            // if the response is not empty, then the upload to widgetic server finished
+            if(upload._req._xhr.response == "") {
+
+              console.log("Dropzone TUS Client Upload Complete to server for file:", upload);
+
+              // update the file thumbnail to processing state
+              this._updateFileState('sending', file);
+            }
+
+            else {
+              console.log("Dropzone TUS Client Upload Complete to B2 with response:", upload._req._xhr.response);
+
+              // create uploadFile object
+              let uploadFile =  upload.file;
+
+              // add the request to the file object for later use in Uploads.uploadComplete method
+              uploadFile.xhr = upload._req._xhr;
+
+              // call upload complete method from here that calls the Uploads.uploadComplete method
+              this._onUploadComplete(uploadFile);
+            }
+          }
+        });
+
+        // Start the TUS upload
+        upload.start();
+      }
+
+      // fire new event in the editor
+      this.fire('new', file);
+
+      // call uploadStart method on Uploads service
       this.Uploads.upload(file);
+
+      // change the file state to uploading
+      this._updateFileState('sending', file);
     },
     _onThumbnail(file, thumbnail) {
       this.Uploads.setThumbnail(file, thumbnail);
     },
     _onError(file, error) {
-      console.error(error);
+      // console.error(error);
+      
+      // Fire an error event in the editor
       this.fire('error', { message: error });
+
+      // Set the error on the file object in the Uploads service
       this.Uploads.setError(file, error);
     },
     _onUploadProgress(file, percentage, size) {
       this.Uploads.setUploadProgress(file, percentage, size);
     },
-    _onComplete(file) {
+    _onUploadComplete(file) {
+      // console.log("Dropzone Component cploadComplete for file:", file);
       this.Uploads.uploadComplete(file, this.get('instanceId'));
     },
     _updateFileState(state, file) {
+      // console.log("Dropzone Component _updateFileState:", state);
       this.Uploads.setUploadState(file, state);
     },
     _onTotalUploadProgress() {
@@ -168,6 +250,10 @@ export default {
       this.dropzone.removeAllFiles();
     },
     _onUploadsUpdate() {
+
+      // console.log("Dropzone _onUploadsUpdate:", this.Uploads.quota, this.Uploads.used);
+
+      // Update the quota and used space so it updates in the dropzone UI
       this.set({
         quota: this.Uploads.quota,
         used: this.Uploads.used,

package/src/editor/content/browser/file.html

@@ -12,6 +12,7 @@
     {{#if file.thumbnail}}
       <div class="browser-image-prew_img" style="background-image: url('{{ file.thumbnail }}')" width="112" height="71"/>
     {{/if}}
+
     <div class="progress-bar">
       {{#if file.progress === 100 && file.state === 'sending'}}
         <div style="width: 100%">Processing...</div>
@@ -19,6 +20,7 @@
         <div class="progress-bar_fill" style="width: {{ file.progress }}%"></div>
       {{/if}}
     </div>
+    
   </div>
   <div class="browser-entry-info" on:click="togglePlay()">{{ file.name }}</div>
 </div>