|
|
@@ -1,88 +0,0 @@
|
|
|
-# Transloadit JavaScript SDK architecture
|
|
|
-
|
|
|
-This file might be slightly outdate. Current proposal as of 2015-11-23 is reflected in [classes.es6](https://github.com/transloadit/uppy/blob/f1aa1072d5159c372624a57d5a8edaad2119efa9/classes.es6)
|
|
|
-
|
|
|
-
|
|
|
-## Core
|
|
|
-
|
|
|
-1. The core function `transloadit` accepts `options` and exposes methods like `.use` for adding plugins and `.set` for setting options.
|
|
|
-2. Each plugin is then called by the `use` with given `options` as an argument.
|
|
|
-3. The result is passed from the plugin to `prepareMedia` for some final processing
|
|
|
-4. Then the processed files go into `upload` which uploads everything to Transloadit servers, using `tus`.
|
|
|
-
|
|
|
-## Plugins
|
|
|
-
|
|
|
-1. Plugins should be registered like this:
|
|
|
-```javascript
|
|
|
- transloadit.use(dragndrop, {
|
|
|
- selector: '.drop'
|
|
|
- });
|
|
|
-```
|
|
|
-
|
|
|
-`dragndrop` here is function that we pass as an argument.
|
|
|
-*For reference, see [Markdown-It](https://github.com/markdown-it/markdown-it/blob/master/lib/index.js#L459).*
|
|
|
-
|
|
|
-2. Settings and handlers should be chainable and set like this:
|
|
|
-```javascript
|
|
|
-transloadit
|
|
|
- .set({ wait: true })
|
|
|
- .use(transloaditModal, {some: 'config'})
|
|
|
- .use(dragdrop, {target: transloaditModal})
|
|
|
- .use(instagram, {some: 'config'})
|
|
|
- .on('progress', handleProgress)
|
|
|
- .on('error', handleError);
|
|
|
-```
|
|
|
-
|
|
|
-3. In `transloadit-js` everything is a plugin: a `Modal` dialog, `Drag & Drop`, `Instagram`. We borrow general approach from the new Babel and PostCSS — almost barebones by default, 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. Presets should exist with basic plugins like `Modal` & `Drag & Drop`. This should let people who just want to get it working as quickly as possible get started in seconds:
|
|
|
- ```javascript
|
|
|
- transloadit
|
|
|
- .set({ wait: true })
|
|
|
- .use(transloaditBasic, {some: 'config'})
|
|
|
- ```
|
|
|
-
|
|
|
- *See [`es2015-preset`](https://babeljs.io/docs/plugins/preset-es2015/) for Babel and [`PreCSS`](https://github.com/jonathantneal/precss#plugins) for PostCSS.*
|
|
|
-
|
|
|
- or just make it a code sample for easy copy/pasting and future customizations (no need to change the main function call, just add/remove lines to modify behaviour):
|
|
|
- ```javascript
|
|
|
- transloadit
|
|
|
- .set({ wait: true })
|
|
|
- .use(transloaditModal, {some: 'config'})
|
|
|
- .use(dragdrop, {target: transloaditModal})
|
|
|
- ```
|
|
|
-
|
|
|
-5. Users should be able to set themes and style settings in config: `.use(myTheme)`.
|
|
|
-
|
|
|
-6. Would be cool if you could use whatever drag & drop library you wanted (DropZone) with our wrapper.
|
|
|
-
|
|
|
-## Usage
|
|
|
-
|
|
|
-```javascript
|
|
|
-import transloadit from 'transloadit';
|
|
|
-import dragndrop from 'transloadit-dragndrop';
|
|
|
-import instagram from 'transloadit-instagram';
|
|
|
-import modal from 'transloadit-modal';
|
|
|
-
|
|
|
-// import Transloadit from 'transloadit-client'
|
|
|
-// import { dropbox, instagram, dragdrop, webcam } from 'transloadit-client/plugins'
|
|
|
-
|
|
|
-// or to import all of them
|
|
|
-// import { * as plugins } from 'transloadit/plugins'
|
|
|
-
|
|
|
-transloadit
|
|
|
- .set({ wait: true })
|
|
|
- .use(modal, {some: 'config'})
|
|
|
- .use(dragdrop, {target: transloaditModal})
|
|
|
- .use(instagram, {some: 'config'})
|
|
|
- .on('progress', handleProgress)
|
|
|
- .on('error', handleError)
|
|
|
- .on('done', handleResult);
|
|
|
-```
|
|
|
-
|
|
|
-## References & Inspiration
|
|
|
-
|
|
|
-1. PostCSS
|
|
|
-2. Markdown-It
|
|
|
-3. Babel
|
|
|
-4. Lodash
|
Kevin van Zonneveld