探客时代
Uppy
The next open source file uploader for web browsers
README
| | | | |
|---|---|
| |-|-|-|-| | |
| Tests | |
| Deploys |
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, a versatile API to handle any file in your app.
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 or read the 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 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
Works great with file encoding and processing backends, such as Transloadit, 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
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
- ``` sh
- npm install @uppy/core @uppy/dashboard @uppy/tus
- ```
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
- <link href="https://releases.transloadit.com/uppy/v3.3.1/uppy.min.css" rel="stylesheet">
- <div id="files-drag-drop"></div>
- <script type="module">
- import { Uppy, Dashboard, Tus } from "https://releases.transloadit.com/uppy/v3.3.1/uppy.min.mjs"
- const uppy = new Uppy()
- uppy.use(Dashboard, { target: '#files-drag-drop' })
- uppy.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
- </script>
- ```
Documentation
Uppy — full list of options, methods and events
Plugins — list of Uppy plugins and their options
Companion — setting up and running a Companion instance, which adds support for Instagram, Dropbox, Box, Google Drive and remote URLs
React — components to integrate Uppy UI plugins with React apps
Architecture & Writing a Plugin — 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 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’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 `