Port code into backbone/rivets land.

+.*.swp
+.tmp/
+dist/
+node_modules/
+src/lib/
+.grunt/
+_SpecRunner.html

+/* global module */
+
+module.exports = function (grunt) {
+    /* global require */
+    'use strict';
+
+    var config = {};
+    config.base = 'src';
+    config.jshint = {
+        options: {
+        },
+        browserOptions: {
+        },
+    };
+    config.jscs = {
+        options: {
+            validateIndentation: 4,
+            reporter: 'console',
+            maxErrors: -1,
+        },
+    };
+    config.bower = {
+        directory: 'lib/bower',
+    };
+    config.jasmine = {
+        withCoverage: true,
+    };
+    var montyPython = require('grunt-monty-python')(grunt);
+    montyPython.createConfig(config);
+};

+{
+  "name": "frontend-uploads",
+  "version": "2016.07.06-0",
+  "authors": [
+    "Adam Heath <doogie@brainfood.com>"
+  ],
+  "main": [
+    "src/scripts/Upload.js"
+  ],
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "src/lib",
+    "src/scripts/*.spec.js",
+    "src/scripts/config.js",
+    "src/scripts/main.js"
+  ],
+  "dependencies": {
+    "requirejs": "",
+    "jquery": "",
+    "underscore": "",
+    "backbone": "",
+    "rivets": "",
+    "flow": ""
+  }
+}

+{
+  "name": "frontend-uploads",
+  "version": "2016.07.06-0",
+  "main": [
+    "src/scripts/Upload.js"
+  ],
+  "dependencies": {
+  },
+  "devDependencies": {
+    "bower-requirejs": "~0.9.2",
+    "grunt": "~0",
+    "grunt-monty-python": "git+ssh://git@gitlab.brainfood.com:brainfood/grunt-monty-python.git"
+  },
+  "engines": {
+    "node": ">=0.8.0"
+  }
+}
+

+define(function(require) {
+    'use strict';
+
+    var $ = require('jquery');
+    var Backbone = require('backbone');
+    var Flow = require('flow');
+
+    var Status = Backbone.Model.extend({
+        defaults: function() {
+            return {
+                result: null,
+                resultData: null,
+                sent: null,
+                completion: null,
+                total: null,
+            };
+        },
+    });
+    var Upload = Backbone.Model.extend({
+        defaults: function() {
+            return {
+                name: null,
+                status: new Status(),
+                date: null,
+                size: null,
+            };
+        },
+        initialize: function() {
+            Upload.__super__.initialize.apply(this, arguments);
+            _.each(['retry', 'pause', 'resume', 'cancel'], function(methodName) {
+                this[methodName] = _.bind(function(e) {
+                    if (e) {
+                        e.preventDefault();
+                    }
+                    var flowFile = this.flowFile;
+                    if (flowFile) {
+                        flowFile[methodName].call(flowFile);
+                    }
+                    if (flowFile.paused) {
+                        this.get('status').set({
+                            result: 'paused',
+                            resultData: null,
+                        });
+                    }
+                    return false;
+                }, this);
+            }, this);
+        },
+        parse: function(data, options) {
+            data = _.extend({}, data);
+            var status = data.status;
+            if (!(status instanceof Backbone.Model)) {
+                data.status = new Status(status);
+            }
+            return data;
+        },
+    });
+    var Uploads = Backbone.Collection.extend({
+        model: Upload,
+        initialize: function initialize(data, options) {
+            Uploads.__super__.initialize.apply(this, arguments);
+        },
+    });
+
+    function makeFallbackFlowEventHandler(eventName) {
+        return function() {
+            console.log('flow.' + eventName, arguments);
+        };
+    }
+
+    _.extend(Upload, {
+        Uploads: Uploads,
+        Status: Status,
+        flowEventHandlers: {
+            fileAdded: function(flowFile) {
+                var model = flowFile._model;
+                if (!model) {
+                    model = flowFile._model = new Upload({
+                        name: flowFile.name,
+                        size: flowFile.size,
+                        startDate: new Date(),
+                    });
+                    model.flowFile = flowFile;
+                    this.model.get('collection').add(model);
+                }
+                return true;
+            },
+            filesAdded: function() {
+                return true;
+            },
+            filesSubmitted: function() {
+                this.flow.upload();
+            },
+            fileProgress: function(flowFile) {
+                var model = flowFile._model;
+                if (model) {
+                    model.get('status').set({
+                        result: 'uploading',
+                        resultData: null,
+                        completion: Math.floor(flowFile.progress() * 100),
+                        size: flowFile.sizeUploaded(),
+                    });
+                }
+            },
+            fileSuccess: function(flowFile, message, chunk) {
+                var model = flowFile._model;
+                if (model) {
+                    model.get('status').set({
+                        result: 'success',
+                        resultData: message,
+                    });
+                }
+            },
+            fileError: function(flowFile, message, chunk) {
+                var model = flowFile._model;
+                if (model) {
+                    model.get('status').set({
+                        result: 'error',
+                        resultData: message,
+                    });
+                }
+            },
+            fileRemoved: function(flowFile) {
+                var model = flowFile._model;
+                if (model) {
+                    this.model.get('collection').remove(model);
+                }
+            },
+        },
+        rivetsComponent: {
+            static: [
+                'accept',
+                'allowDuplicateUploads',
+                'maxChunkRetries',
+                'maxFilesize',
+                'prioritizeFirstAndLastChunk',
+                'simultaneousUploads',
+            ],
+            template: function() {
+                return this.el.innerHTML;
+            },
+            initialize: function initialize(el, locals) {
+                var instance = {el: el};
+                var model = instance.model = new Backbone.Model(locals);
+                _.each(this.observers, function(observer, key) {
+                    sightglass(observer.obj, observer.keypath, function() {
+                        model.set(key, observer.value());
+                    }, observer.options);
+                });
+                var flow = instance.flow = new Flow({
+                    target: _.bind(function(flowFile, flowChunk, isTest) {
+                        var model = this.model;
+                        var target = model.get('target');
+                        var sessionId = model.get('sessionId');
+                        if (target) {
+                            if (target.indexOf('?') !== -1) {
+                                target += '&';
+                            } else {
+                                target += '?';
+                            }
+                        } else {
+                            target = '?';
+                        }
+                        return target + 'sessionId=' + sessionId;
+                    }, instance),
+                    allowDuplicateUploads: locals.allowDuplicateUploads,
+                    maxChunkRetries: locals.maxChunkRetries,
+                    maxFilesize: locals.maxFilesize,
+                    prioritizeFirstAndLastChunk: locals.prioritizeFirstAndLastChunk,
+                    simultaneousUploads: locals.simultaneousUploads,
+                });
+                _.each([
+                    'fileSuccess',
+                    'fileProgress',
+                    'fileAdded',
+                    'filesAdded',
+                    'filesSubmitted',
+                    'fileRemoved',
+                    'fileRetry',
+                    'fileError',
+                    //'uploadStart',
+                    //'complete',
+                    //'progress',
+                    //'error',
+                ], function(eventName) {
+                    var eventHandler = Upload.flowEventHandlers[eventName] || makeFallbackFlowEventHandler(eventName);
+                    flow.on(eventName, _.bind(eventHandler, instance));
+                });
+                flow.assignBrowse(el, true, false, {
+                    accept: model.get('accept'),
+                });
+                flow.assignDrop(el);
+                instance.view = rivets.bind($(el).contents(), this.view.models);
+                return {};
+            },
+        },
+    });
+
+    return Upload;
+});

+/* global require:true */
+var require;
+require = (function() {
+    'use strict';
+
+    var require = {
+        baseUrl: 'scripts',
+        shim: {
+            backbone: {
+                deps: ['underscore'],
+                exports: 'Backbone',
+            },
+            underscore: {
+                exports: '_',
+            },
+        },
+        paths: {
+            flow: '../lib/bower/underscore/underscore',
+            jquery: '../lib/bower/jquery/dist/jquery',
+            underscore: '../lib/bower/underscore/underscore',
+            backbone: '../lib/bower/backbone/backbone',
+        },
+    };
+
+    return require;
+})();

+/* global require */
+define(function(require) {
+    'use strict';
+});