Move uploading code out of DragDrop plugin, into own plugins

package.json

@@ -54,6 +54,7 @@
     "zuul": "^3.7.2"
   },
   "dependencies": {
-    "superagent": "^1.5.0"
+    "superagent": "^1.5.0",
+    "tus-js-client": "^1.1.3"
   }
 }

src/plugins/DragDrop.js

@@ -1,7 +1,5 @@
 import Utils from '../core/Utils';
 import Plugin from './Plugin';
-// import Tus from 'tus-js-client';
-// console.log('pizza', Tus);
 
 export default class DragDrop extends Plugin {
   constructor(core, opts) {
@@ -33,7 +31,6 @@ export default class DragDrop extends Plugin {
     this.listenForEvents = this.listenForEvents.bind(this);
     this.handleDrop = this.handleDrop.bind(this);
     this.checkDragDropSupport = this.checkDragDropSupport.bind(this);
-    this.upload = this.upload.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
   }
 
@@ -87,64 +84,25 @@ export default class DragDrop extends Plugin {
   handleDrop(e) {
     console.log('all right, someone dropped something here...');
     const files = e.dataTransfer.files;
-    const formData = new FormData(this.dropzone);
+    // const formData = new FormData(this.dropzone);
     // console.log('pizza', formData);
 
-    for (var i = 0; i < files.length; i++) {
-      formData.append('file', files[i]);
-      console.log('pizza', files[i]);
-    }
+    // for (var i = 0; i < files.length; i++) {
+    //   formData.append('file', files[i]);
+    //   console.log('pizza', files[i]);
+    // }
 
-    this.upload(formData);
+    return Promise.resolve(files);
   }
 
   handleInputChange() {
     // const fileInput = document.querySelectorAll('.UppyDragDrop-input')[0];
     const formData = new FormData(this.dropzone);
-    console.log('pizza', formData);
-
-    this.upload(formData);
-  }
-
-  upload(data) {
-    this.displayStatus('Uploading...');
-
-    const request = new XMLHttpRequest();
-    request.open('POST', 'http://api2.transloadit.com', true);
-    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
 
-    request.addEventListener('load', () => {
-      console.log('fucking done!');
-      this.displayStatus('Done.');
-    });
-
-    request.addEventListener('load', () => {
-      this.displayStatus('Done.');
-    });
+    console.log('@todo: No support for formData yet', formData);
+    const files = [];
 
-    request.addEventListener('error', () => {
-      console.log('fucking error!');
-    });
-
-    request.send(data);
-
-    // Create a new tus upload
-    // const upload = new Tus.Upload(data, {
-    //   endpoint: 'http://master.tus.io:8080',
-    //   onError: function(error) {
-    //     console.log('Failed because: ' + error);
-    //   },
-    //   onProgress: function(bytesUploaded, bytesTotal) {
-    //     var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2);
-    //     console.log(bytesUploaded, bytesTotal, percentage + '%');
-    //   },
-    //   onSuccess: function() {
-    //     console.log('Download %s from %s', upload.file.name, upload.url);
-    //   }
-    // });
-    //
-    // // Start the upload
-    // upload.start();
+    return Promise.resolve(files);
   }
 
   run(files) {
@@ -162,6 +120,6 @@ export default class DragDrop extends Plugin {
     this.core.setProgress(this, 100);
     // return selected;
     // done(null, 'done with DragDrop');
-    return Promise.resolve(files);
+    // return Promise.resolve(files);
   }
 }

src/plugins/Multipart.js

@@ -0,0 +1,49 @@
+import Plugin from './Plugin';
+
+export default class Multipart extends Plugin {
+  constructor(core, opts) {
+    super(core, opts);
+    this.type = 'uploader';
+  }
+
+  run(files) {
+    // console.log(files);
+    this.core.setProgress(this, 0);
+
+    var uploaded = [];
+    for (var i in files) {
+      var file = files[i];
+      this.upload(file);
+      this.core.setProgress(this, (i * 1) + 1);
+      uploaded[i]     = file;
+      uploaded[i].url = this.opts.endpoint + '/uploaded/' + file.name;
+    }
+    this.core.setProgress(this, 100);
+
+    return Promise.resolve(uploaded);
+  }
+
+  upload(data) {
+    this.displayStatus('Uploading...');
+
+    const request = new XMLHttpRequest();
+    boundary = '---------------------------' + Date.now().toString(16);
+    request.setRequestHeader('Content-Type', 'multipart\/form-data; boundary=' + boundary);
+    request.sendAsBinary('--' + boundary + '\r\n' + oData.segments.join('--' + boundary + '\r\n') + '--' + boundary + '--\r\n');
+
+    request.addEventListener('load', () => {
+      console.log('fucking done!');
+      this.displayStatus('Done.');
+    });
+
+    request.addEventListener('load', () => {
+      this.displayStatus('Done.');
+    });
+
+    request.addEventListener('error', () => {
+      console.log('fucking error!');
+    });
+
+    request.send(data);
+  }
+}

src/plugins/Tus10.js

@@ -1,4 +1,5 @@
 import Plugin from './Plugin';
+import Tus from 'tus-js-client';
 
 export default class Tus10 extends Plugin {
   constructor(core, opts) {

src/plugins/index.js

@@ -1,13 +1,22 @@
-import Plugin from './Plugin'
-import DragDrop from './DragDrop'
-import Dropbox from './Dropbox'
-import TransloaditBasic from './TransloaditBasic'
-import Tus10 from './Tus10'
+// Parent
+import Plugin from './Plugin';
+
+// Selecters
+import DragDrop from './DragDrop';
+import Dropbox from './Dropbox';
+
+// Uploaders
+import Tus10 from './Tus10';
+import Multipart from './Multipart';
+
+// Presetters
+import TransloaditBasic from './TransloaditBasic';
 
 export default {
   Plugin,
-  Dropbox,
   DragDrop,
-  TransloaditBasic,
-  Tus10
+  Dropbox,
+  Tus10,
+  Multipart,
+  TransloaditBasic
 };