uppy/website/src/api/architecture.md

type	order	title	permalink
api	0	Architecture	api/

Work in progress, API not stable. Last update: 2015-12-03

The Gist

import Uppy from './src/core';
import { DragDrop, Tus10 } from './src/plugins';

const uppy = new Uppy({wait: false});
const files = uppy
  .use(DragDrop, {selector: '#upload-target'})
  .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
  .run();

Core

1. Core class Uppy accepts object options (with general options), and exposes methods .use for adding plugins and .set for setting options.
2. We create a new instance of Uppy and call .use on it, passing the plugins and their options.
3. Then run is called to get things going.
4. Plugins have types: presetter, orchestrator, progressindicator, acquirer, uploader, and presenter (more could be added in the future). When use is called, each plugin’s run method is added to an array of corresponding types, methods.
5. Ok, now the tricky part. Core’s method run iterates over plugin types in a waterfall manner — each runTypes runs its methods in parallel and returns an array of results (files) to the next plugin type in the waterfall. This way we first get all the of files from DragDrop, Dropbox, Instagram and other inputs — then parse them somehow — and then upload:

Plugins

1. Plugins are registered like this:

uppy
  .use(DragDrop, {selector: '#upload-target'})
  .use(Tus10, {endpoint: 'http://master.tus.io:8080'})

Internally, plugins extend from a Plugin class, see that for details.

2. Settings and handlers are chainable, set like this:

uppy
  .set({ wait: true })
  .use(Modal, {target: 'div#mycontainer', some: 'config'})
  .use(DragDrop, {target: Modal})
  .use(Instagram, {target: Modal, some: 'config'})
  .on('progress', handleProgress)
  .on('error', handleError);

3. In Uppy everything is a plugin: a Modal dialog, Drag & Drop, Instagram. We borrow general approach from the new Babel and PostCSS — each chunk of functionality exists as separate plugin — easier to pick and choose exactly what you need to get a lightweight solution for production, while also easier to develop and avoid merge conflicts.

4. There will be a simplified preset that strings together many Plugins using sane defaults.

uppy
  .use(Basic, {target: 'div#mycontainer', endpoint: 'http://master.tus.io:8080'})
  .run();

5. Users will be able to rol out themes and style settings via plain CSS .

6. Would be cool if you could use whatever drag & drop library you wanted (DropZone) with our wrapper.

References & Inspiration

1. PostCSS
2. Markdown-It
3. Babel
4. Lodash
5. Vue.js
6. The tus js client