Extensible JavaScript file upload widget with support for drag&drop, resumable uploads, previews, restrictions, file processing/encoding, remote providers like Instagram, Dropbox, Google Drive, S3 and more :dog:
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.
Uppy is being developed by the folks at Transloadit, a versatile API to handle any file in your app.
| Tests |  |  |  |
|---|---|---|---|
| Deploys |  |  |  |
Code used in the above example:
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 or read the docs for more details on how to use Uppy and its plugins.
npm install @uppy/core @uppy/dashboard @uppy/tus
Add CSS
uppy.min.css,
either to your HTML page’s <head> 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.
<!-- 1. Add CSS to `<head>` -->
<link
href="https://releases.transloadit.com/uppy/v4.13.0/uppy.min.css"
rel="stylesheet"
/>
<!-- 2. Initialize -->
<div id="files-drag-drop"></div>
<script type="module">
import {
Uppy,
Dashboard,
Tus,
} from 'https://releases.transloadit.com/uppy/v4.13.0/uppy.min.mjs'
const uppy = new Uppy()
uppy.use(Dashboard, { target: '#files-drag-drop' })
uppy.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
</script>
Dashboard — universal UI with previews,
progress bars, metadata editor and all the cool stuff. Required for most UI
plugins like Webcam and InstagramProgress Bar — minimal progress bar
that fills itself when upload progressesStatus Bar — more detailed progress,
pause/resume/cancel buttons, percentage, speed, uploaded/total sizes (included
by default with Dashboard)Informer — send notifications like “smile”
before taking a selfie or “upload failed” when all is lost (also included by
default with Dashboard)Drag & Drop — plain drag and drop areaFile Input — even plainer “select files”
buttonWebcam — snap and record those selfies 📷Google Drive — import files from
Google DriveDropbox — import files from DropboxBox — import files from BoxInstagram — import images and videos
from InstagramFacebook — import images and videos from
FacebookOneDrive — import files from Microsoft
OneDriveImport From URL — import direct URLs from
anywhere on the webThe ⓒ mark means that @uppy/companion, a
server-side component, is needed for a plugin to work.
Tus — resumable uploads via the open
tus standardXHR Upload — regular uploads for any
backend out there (like Apache, Nginx)AWS S3 — plain upload to AWS S3 or
compatible servicesAWS S3 Multipart — S3-style
“Multipart” upload to AWS or compatible servicesTransloadit — support for
Transloadit’s robust file uploading and encoding
backendGolden Retriever — restores files
after a browser crash, like it’s nothingThumbnail Generator — generates
image previews (included by default with Dashboard)Form — collects metadata from <form> right
before an Uppy upload, then optionally appends results back to the formRedux — for your
emerging time traveling needsWe aim to support recent versions of Chrome, Firefox, and Safari.
<input type="file">?Having no JavaScript beats having a lot of it, so that’s a fair question! Running an uploading & encoding business for ten years though we found that in cases, the file input leaves some to be desired:
Not all apps need all these features. An <input type="file"> is fine in many
situations. But these were a few things that our customers hit / asked about
enough to spark us to develop Uppy.
Transloadit’s team is small and we have a shared ambition to make a living from open source. By giving away projects like tus.io and Uppy, we’re hoping to advance the state of the art, make life a tiny little bit better for everyone and in doing so have rewarding jobs and get some eyes on our commercial service: a content ingestion & processing platform.
Our thinking is that if only a fraction of our open source userbase can see the appeal of hosted versions straight from the source, that could already be enough to sustain our work. So far this is working out! We’re able to dedicate 80% of our time to open source and haven’t gone bankrupt yet. :D
Yes, please check out the docs for more information.
Yes, whatever you want on the backend will work with @uppy/xhr-upload plugin,
since it only does a POST or PUT request. Here’s a
PHP backend example.
If you want resumability with the Tus plugin, use one of the tus server implementations 👌🏼
And you’ll need @uppy/companion if you’d
like your users to be able to pick files from Instagram, Google Drive, Dropbox
or via direct URLs (with more services coming).
.github/CONTRIBUTING.mdCHANGELOG.mdUppy is used by: Photobox, Issuu, Law Insider, Cool Tabs, Soundoff, Scrumi, Crive and others.
Use Uppy in your project? Let us know!
 |  |  |  |  |  |
 |  |  |  | ![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&s=117) | ![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4&s=117) |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |  |  |  |  |  |
 |
The MIT License.
FAQs
Extensible JavaScript file upload widget with support for drag&drop, resumable uploads, previews, restrictions, file processing/encoding, remote providers like Instagram, Dropbox, Google Drive, S3 and more :dog:
The npm package uppy receives a total of 13,674 weekly downloads. As such, uppy popularity was classified as popular.
We found that uppy demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.