Uppy is a sleek, modular JavaScript file uploader that integrates seamlessly
with any application. It’s fast, has a comprehensible API and lets you worry
about more important problems than building a file uploader.
Fetch files from local disk, remote URLs, Google Drive, Dropbox, Box,
Instagram or snap and record selfies with a camera
Preview and edit metadata with a nice interface
Upload to the final destination, optionally process/encode
Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
a versatile API to handle any file in your app.
Tests
Deploys
## Example
Code used in the above example:
```js
import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import RemoteSources from '@uppy/remote-sources'
import ImageEditor from '@uppy/image-editor'
import Webcam from '@uppy/webcam'
import Tus from '@uppy/tus'
const uppy = new Uppy()
.use(Dashboard, { trigger: '#select-files' })
.use(RemoteSources, { companionUrl: 'https://companion.uppy.io' })
.use(Webcam)
.use(ImageEditor)
.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
.on('complete', (result) => {
console.log('Upload result:', result)
})
```
**[Try it online](https://uppy.io/examples/dashboard/)** or
**[read the docs](https://uppy.io/docs)** for more details on how to use Uppy
and its plugins.
## Features
- Lightweight, modular plugin-based architecture, light on dependencies :zap:
- Resumable file uploads via the open [tus](https://tus.io/) standard, so large
uploads survive network hiccups
- Supports picking files from: Webcam, Dropbox, Box, Google Drive, Instagram,
bypassing the user’s device where possible, syncing between servers directly
via [@uppy/companion](https://uppy.io/docs/companion)
- Works great with file encoding and processing backends, such as
[Transloadit](https://transloadit.com), works great without (all you need is
to roll your own Apache/Nginx/Node/FFmpeg/etc backend)
- Sleek user interface :sparkles:
- Optional file recovery (after a browser crash) with
[Golden Retriever](https://uppy.io/docs/golden-retriever/)
- Speaks several languages (i18n) :earth_africa:
- Built with accessibility in mind
- Free for the world, forever (as in beer 🍺, pizza 🍕, and liberty 🗽)
- Cute as a puppy, also accepts cat pictures :dog:
## Installation
```bash
npm install @uppy/core @uppy/dashboard @uppy/tus
```
Add CSS
[uppy.min.css](https://releases.transloadit.com/uppy/v4.7.0/uppy.min.css),
either to your HTML page’s `` or include in JS, if your bundler of choice
supports it.
Alternatively, you can also use a pre-built bundle from Transloadit’s CDN: Smart
CDN. In that case `Uppy` will attach itself to the global `window.Uppy` object.
> ⚠️ The bundle consists of most Uppy plugins, so this method is not recommended
> for production, as your users will have to download all plugins when you are
> likely using only a few.
```html
```
## Documentation
- [Uppy](https://uppy.io/docs/uppy/) — full list of options, methods and events
- [Companion](https://uppy.io/docs/companion/) — setting up and running a
Companion instance, which adds support for Instagram, Dropbox, Box, Google
Drive and remote URLs
- [React](https://uppy.io/docs/react/) — components to integrate Uppy UI plugins
with React apps
- [Architecture & Writing a Plugin](https://uppy.io/docs/writing-plugins/) — how
to write a plugin for Uppy
## Plugins
### UI Elements
- [`Dashboard`](https://uppy.io/docs/dashboard/) — universal UI with previews,
progress bars, metadata editor and all the cool stuff. Required for most UI
plugins like Webcam and Instagram
- [`Progress Bar`](https://uppy.io/docs/progress-bar/) — minimal progress bar
that fills itself when upload progresses
- [`Status Bar`](https://uppy.io/docs/status-bar/) — more detailed progress,
pause/resume/cancel buttons, percentage, speed, uploaded/total sizes (included
by default with `Dashboard`)
- [`Informer`](https://uppy.io/docs/informer/) — send notifications like “smile”
before taking a selfie or “upload failed” when all is lost (also included by
default with `Dashboard`)
### Sources
- [`Drag & Drop`](https://uppy.io/docs/drag-drop/) — plain drag and drop area
- [`File Input`](https://uppy.io/docs/file-input/) — even plainer “select files”
button
- [`Webcam`](https://uppy.io/docs/webcam/) — snap and record those selfies 📷
- ⓒ [`Google Drive`](https://uppy.io/docs/google-drive/) — import files from
Google Drive
- ⓒ [`Dropbox`](https://uppy.io/docs/dropbox/) — import files from Dropbox
- ⓒ [`Box`](https://uppy.io/docs/box/) — import files from Box
- ⓒ [`Instagram`](https://uppy.io/docs/instagram/) — import images and videos
from Instagram
- ⓒ [`Facebook`](https://uppy.io/docs/facebook/) — import images and videos from
Facebook
- ⓒ [`OneDrive`](https://uppy.io/docs/onedrive/) — import files from Microsoft
OneDrive
- ⓒ [`Import From URL`](https://uppy.io/docs/url/) — import direct URLs from
anywhere on the web
The ⓒ mark means that [`@uppy/companion`](https://uppy.io/docs/companion), a
server-side component, is needed for a plugin to work.
### Destinations
- [`Tus`](https://uppy.io/docs/tus/) — resumable uploads via the open
[tus](http://tus.io) standard
- [`XHR Upload`](https://uppy.io/docs/xhr-upload/) — regular uploads for any
backend out there (like Apache, Nginx)
- [`AWS S3`](https://uppy.io/docs/aws-s3/) — plain upload to AWS S3 or
compatible services
- [`AWS S3 Multipart`](https://uppy.io/docs/aws-s3-multipart/) — S3-style
“Multipart” upload to AWS or compatible services
### File Processing
- [`Transloadit`](https://uppy.io/docs/transloadit/) — support for
[Transloadit](http://transloadit.com)’s robust file uploading and encoding
backend
### Miscellaneous
- [`Golden Retriever`](https://uppy.io/docs/golden-retriever/) — restores files
after a browser crash, like it’s nothing
- [`Thumbnail Generator`](https://uppy.io/docs/thumbnail-generator/) — generates
image previews (included by default with `Dashboard`)
- [`Form`](https://uppy.io/docs/form/) — collects metadata from `
