# [Uppy](https://uppy.io) [](https://www.npmjs.com/package/uppy)
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
**[Read the docs](https://uppy.io/docs)** | **[Try Uppy](https://uppy.io/examples/dashboard/)**
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, { target: Dashboard })
.use(ImageEditor, { target: Dashboard })
.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/v3.19.1/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: Edgly. 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
* [Plugins](https://uppy.io/docs/plugins/) — list of Uppy plugins and their options
* [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
[List of plugins and their common options](https://uppy.io/docs/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 `
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
**[Read the docs](https://uppy.io/docs)** | **[Try Uppy](https://uppy.io/examples/dashboard/)**
