uppy/website/src/api/index.md

---

type: api order: 0

title: "Architecture"

Uppy File Uploader Architecture

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, selecter and uploader (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 UppyPlugin class, see that for details.

   1. Settings and handlers are chainable, set like this: javascript uppy .set({ wait: true }) .use(transloaditModal, {some: 'config'}) .use(dragdrop, {target: transloaditModal}) .use(instagram, {some: 'config'}) .on('progress', handleProgress) .on('error', handleError);

2. 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.

3. There will be a simplified version that includes all the necessary plugins and sane defaults.

   uppyDist
   .set({ wait: true })
   .run();
   

   1. Users should be able to set themes and style settings in config: .use(myTheme).

   2. 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