mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-24 10:47:44 +00:00
88 lines
3.3 KiB
Markdown
88 lines
3.3 KiB
Markdown
# 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
|