First swing at Multipart Form plugins

src/plugins/Formtag.js

@@ -0,0 +1,28 @@
+import Plugin from './Plugin';
+
+export default class Formtag extends Plugin {
+  constructor(core, opts) {
+    super(core, opts);
+    this.type = 'selecter';
+  }
+
+  run(files) {
+    console.log(files);
+    console.log(this.opts);
+
+    this.core.setProgress(this, 0);
+
+    var selected = [];
+    // for (var i in files) {
+    //   var file = files[i];
+    //   this.upload(file);
+    //   this.core.setProgress(this, (i * 1) + 1);
+    //   selected[i]     = file;
+    //   selected[i].url = this.opts.endpoint + '/selected/' + file.name;
+    // }
+
+    this.core.setProgress(this, 100);
+
+    return Promise.resolve(selected);
+  }
+}

src/plugins/Multipart.js

@@ -4,6 +4,18 @@ export default class Multipart extends Plugin {
   constructor(core, opts) {
     super(core, opts);
     this.type = 'uploader';
+
+    try {
+        if (XMLHttpRequest.prototype.sendAsBinary) return;
+        XMLHttpRequest.prototype.sendAsBinary = function (datastr) {
+            function byteValue(x) {
+                return x.charCodeAt(0) & 0xff;
+            }
+            var ords = Array.prototype.map.call(datastr, byteValue);
+            var ui8a = new Uint8Array(ords);
+            this.send(ui8a.buffer);
+        }
+    } catch (e) {}
   }
 
   run(files) {
@@ -23,27 +35,33 @@ export default class Multipart extends Plugin {
     return Promise.resolve(uploaded);
   }
 
-  upload(data) {
-    this.displayStatus('Uploading...');
+  upload(file) {
+    const boundary = '---------------------------' + Date.now().toString(16);
+    const request  = new XMLHttpRequest();
+
+    const data = { segments: []};
+    data.segments.push(file);
 
-    const request = new XMLHttpRequest();
-    boundary = '---------------------------' + Date.now().toString(16);
+    request.open('POST', 'http://api2.transloadit.com', true);
     request.setRequestHeader('Content-Type', 'multipart\/form-data; boundary=' + boundary);
-    request.sendAsBinary('--' + boundary + '\r\n' + oData.segments.join('--' + boundary + '\r\n') + '--' + boundary + '--\r\n');
+    request.sendAsBinary('--' + boundary + '\r\n' + data.segments.join('--' + boundary + '\r\n') + '--' + boundary + '--\r\n');
+
+    // var request=new XMLHttpRequest();
+    // request.open("POST", domain, true);
+    // request.setRequestHeader("Content-type","multipart/form-data");
+    // var formData = new FormData();
+    // formData.append("data", data_json_string);
+    // request.send(formData);
 
-    request.addEventListener('load', () => {
-      console.log('fucking done!');
-      this.displayStatus('Done.');
-    });
 
     request.addEventListener('load', () => {
-      this.displayStatus('Done.');
+      console.log('fucking done!');
     });
 
     request.addEventListener('error', () => {
       console.log('fucking error!');
     });
 
-    request.send(data);
+    request.send();
   }
 }

src/plugins/index.js

@@ -4,6 +4,7 @@ import Plugin from './Plugin';
 // Selecters
 import DragDrop from './DragDrop';
 import Dropbox from './Dropbox';
+import Formtag from './Formtag';
 
 // Uploaders
 import Tus10 from './Tus10';
@@ -16,6 +17,7 @@ export default {
   Plugin,
   DragDrop,
   Dropbox,
+  Formtag,
   Tus10,
   Multipart,
   TransloaditBasic

website/_config.yml

@@ -5,9 +5,9 @@
 # Uppy versions, auto updated by update.js
 uppy_version: 0.0.1
 
-uppy_dev_size: "55.95"
-uppy_min_size: "55.95"
-uppy_gz_size: "55.95"
+uppy_dev_size: "77.44"
+uppy_min_size: "77.44"
+uppy_gz_size: "77.44"
 
 # Theme
 google_analytics: UA-63083-12

website/src/examples/dragdrop/app.css

@@ -1,6 +1,4 @@
-/**
-* Drag & Drop CSS to style the demo itself
-*/
+/* Drag & Drop CSS to style the demo itself */
 
 .UppyDragDrop-puppy {
   max-width: 80px;

website/src/examples/multipart/app.es6

@@ -0,0 +1,8 @@
+import Uppy from 'uppy/core';
+import { Formtag, Multipart } from 'uppy/plugins';
+
+const uppy = new Uppy({wait: false});
+const files = uppy
+  .use(Formtag, {selector: '#upload-form'})
+  .use(Multipart, {endpoint: 'http://api2.transloadit.com'})
+  .run();

website/src/examples/multipart/app.html

@@ -0,0 +1,8 @@
+<!-- Basic Uppy styles -->
+<link rel="stylesheet" href="/css/uppy.css">
+
+<form id="upload-form" class="UppyDragDrop" method="post" action="/" enctype="multipart/form-data">
+  <input id="input-file" class="UppyDragDrop-input" type="file" name="files[]" data-multiple-caption="{count} files selected" multiple />
+  <label class="UppyDragDrop-label" for="input-file"><strong>Choose a file</strong></label>
+  <button class="UppyDragDrop-btn" type="submit">Upload</button>
+</form>

website/src/examples/multipart/index.ejs

@@ -0,0 +1,29 @@
+---
+title: Multipart Form Uploads
+layout: example
+type: examples
+order: 3
+---
+
+{% blockquote %}
+Here you'll see a demo of how you might set up Multipart Uploads with Uppy.
+{% endblockquote %}
+
+<% include app.html %>
+<script src="app.js"></script>
+
+<hr />
+
+<p id="console-wrapper">
+  Console output (latest logs are at the top): <br />
+</p>
+
+<p>
+  On this page we're using the following HTML snippet:
+</p>
+{% include_code lang:html dragdrop/app.html %}
+
+<p>
+  Along with this JavaScript:
+</p>
+{% include_code lang:js dragdrop/app.es6 %}