What is @uppy/dashboard?
@uppy/dashboard is a versatile file uploader UI plugin for Uppy, a modular file uploader for web applications. It provides a drag-and-drop interface, file previews, and progress indicators, making it easy to integrate file uploading capabilities into your web application.
What are @uppy/dashboard's main functionalities?
Drag-and-Drop File Upload
This feature allows users to drag and drop files into a designated area for uploading. The code sample demonstrates how to set up the Uppy Dashboard with drag-and-drop functionality.
const Uppy = require('@uppy/core');
const Dashboard = require('@uppy/dashboard');
const uppy = Uppy();
uppy.use(Dashboard, {
target: '#drag-drop-area',
inline: true
});
File Previews
This feature provides previews of the files that are being uploaded. The code sample shows how to configure the Uppy Dashboard to display file previews and upload progress details.
const Uppy = require('@uppy/core');
const Dashboard = require('@uppy/dashboard');
const uppy = Uppy();
uppy.use(Dashboard, {
target: '#file-preview-area',
inline: true,
showLinkToFileUploadResult: true,
showProgressDetails: true
});
Progress Indicators
This feature shows progress indicators for file uploads. The code sample demonstrates how to set up the Uppy Dashboard to display detailed progress indicators for each file being uploaded.
const Uppy = require('@uppy/core');
const Dashboard = require('@uppy/dashboard');
const uppy = Uppy();
uppy.use(Dashboard, {
target: '#progress-indicator-area',
inline: true,
showProgressDetails: true
});
Other packages similar to @uppy/dashboard
react-dropzone
react-dropzone is a simple React component for creating a file dropzone. It provides a basic drag-and-drop interface for file uploads but lacks the advanced features and customization options available in @uppy/dashboard.
fine-uploader
fine-uploader is a comprehensive JavaScript library for file uploads. It offers a wide range of features, including drag-and-drop, file previews, and progress indicators, similar to @uppy/dashboard. However, it is not as modular and may require more configuration.
dropzone
dropzone is a popular JavaScript library for drag-and-drop file uploads. It provides a straightforward API and a customizable UI, but it does not offer the same level of modularity and extensibility as @uppy/dashboard.
@uppy/dashboard
Dashboard is a universal UI plugin for Uppy:
- Drag and Drop, paste, select from local disk / my device
- UI for Webcam and remote sources: Google Drive, Dropbox, Instagram (all optional, added via plugins)
- File previews and info
- Metadata editor
- Progress: total and for individual files
- Ability to pause/resume or cancel (depending on uploader plugin) individual or all files
Read the docs | Try it
Uppy is being developed by the folks at Transloadit, a versatile file encoding service.
Example
import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
const uppy = new Uppy()
uppy.use(Dashboard, {
target: 'body',
inline: true,
})
Installation
$ npm install @uppy/dashboard
Alternatively, you can also use this plugin in a pre-built bundle from Transloadit’s CDN: Edgly. In that case Uppy
will attach itself to the global window.Uppy
object. See the main Uppy documentation for instructions.
Documentation
Documentation for this plugin can be found on the Uppy website.
License
The MIT License.
3.0.0
Released: 2022-08-22
Migration guides:
https://uppy.io/docs/migration-guides.html
| Package | Version | Package | Version |
| ------------------------- | ------- | ------------------------- | ------- |
| @uppy/angular | 0.4.0 | @uppy/progress-bar | 3.0.0 |
| @uppy/audio | 1.0.0 | @uppy/provider-views | 3.0.0 |
| @uppy/aws-s3 | 3.0.0 | @uppy/react | 3.0.0 |
| @uppy/aws-s3-multipart | 3.0.0 | @uppy/react-native | 0.4.0 |
| @uppy/box | 2.0.0 | @uppy/redux-dev-tools | 3.0.0 |
| @uppy/companion | 4.0.0 | @uppy/remote-sources | 1.0.0 |
| @uppy/companion-client | 3.0.0 | @uppy/screen-capture | 3.0.0 |
| @uppy/compressor | 1.0.0 | @uppy/status-bar | 3.0.0 |
| @uppy/core | 3.0.0 | @uppy/store-default | 3.0.0 |
| @uppy/dashboard | 3.0.0 | @uppy/store-redux | 3.0.0 |
| @uppy/drag-drop | 3.0.0 | @uppy/svelte | 2.0.0 |
| @uppy/drop-target | 2.0.0 | @uppy/thumbnail-generator | 3.0.0 |
| @uppy/dropbox | 3.0.0 | @uppy/transloadit | 3.0.0 |
| @uppy/facebook | 3.0.0 | @uppy/tus | 3.0.0 |
| @uppy/file-input | 3.0.0 | @uppy/unsplash | 3.0.0 |
| @uppy/form | 3.0.0 | @uppy/url | 3.0.0 |
| @uppy/golden-retriever | 3.0.0 | @uppy/utils | 5.0.0 |
| @uppy/google-drive | 3.0.0 | @uppy/vue | 1.0.0 |
| @uppy/image-editor | 2.0.0 | @uppy/webcam | 3.0.0 |
| @uppy/informer | 3.0.0 | @uppy/xhr-upload | 3.0.0 |
| @uppy/instagram | 3.0.0 | @uppy/zoom | 2.0.0 |
| @uppy/locales | 3.0.0 | uppy | 3.0.0 |
| @uppy/onedrive | 3.0.0 | | |
- docs: Use RemoteSources in readme example (Artur Paikin / #4030)
- docs: Add migration guide for Uppy 3.x, Companion 4.x, and Robodog (Merlijn Vos / #3913)
- example: upgrade React example to use React 18 (Antoine du Hamel / #4002)
- meta: fix linter failures (Antoine du Hamel / #4029)
- @uppy/vue: move
@uppy/
packages to peer dependencies (Antoine du Hamel / #4024) - @uppy/robodog: remove package (Antoine du Hamel / #3946)
- example: migrate
digitalocean-spaces
to ESM (Antoine du Hamel / #4015) - example: replace Robodog example with Transloadit + RemoteSources + Form (Antoine du Hamel / #4027)
- website: replace Robodog example with Uppy plugins (Artur Paikin / #4026)
- @uppy/aws-s3,@uppy/tus,@uppy/xhr-upload: @uppy/tus, @uppy/xhr-upload, @uppy/aws-s3:
metaFields
-> allowedMetaFields
(Merlijn Vos / #4023) - example: showcase migration out of Robodog (Antoine du Hamel / #4021)
- example: fix Svelte dev mode (Antoine du Hamel / #4025)
- example: fix docs and env for Vite examples (Antoine du Hamel / #4018)
- @uppy/tus: avoid crashing when Tus client reports an error (Antoine du Hamel / #4019)
- @uppy/react: move
@uppy/
packages to peer dependencies (Antoine du Hamel / #4004) - @uppy/core: core: uppy.addFile should accept browser File objects (Artur Paikin / #4020)
- example: fix svelte example (Antoine du Hamel / #4017)
- example: migrate
python-xhr
to ESM (Antoine du Hamel / #4010) - example: migrate
php-xhr
to ESM (Antoine du Hamel / #4009) - example: migrate
node-xhr
to ESM (Antoine du Hamel / #4008) - example: migrate
xhr-bundle
to ESM (Antoine du Hamel / #4012) - example: migrate
multiple-instances
to ESM (Antoine du Hamel / #4007) - example: replace
transloadit-textarea
with transloadit-markdown-bin
(Antoine du Hamel / #4013) - example: add README to Svelte example (Antoine du Hamel / #4011)
- build: Remove size-limit for now (Artur Paikin / #4003)
- @uppy/core,@uppy/dashboard,@uppy/status-bar: Style tweaks: use all: initial + other resets (Artur Paikin / #3983)
- @uppy/aws-s3: aws-s3: fix incorrect comparison for
file-removed
(Merlijn Vos / #3962) - example: update to new CDN export names (Antoine du Hamel / #4006)
- example: fix dependencies of
bundled
example (Antoine du Hamel / #4005) - @uppy/tus: fix dependencies (Antoine du Hamel / #3923)
- @uppy/tus: add file argument to
onBeforeRequest
(Merlijn Vos / #3984) - @uppy/utils: fix drop of multiple files on Chromium browsers (Antoine du Hamel / #3998)
- @uppy/angular: upgrade to Angular 14 (Antoine du Hamel / #3997)
- example: update Angular example to v14 (Antoine du Hamel / #3996)
- @uppy/utils: Fix @uppy/utils microtip.scss export (Merlijn Vos / #3995)
- docs: Companion: make streaming upload recommended & other docs tweaks (Mikael Finstad / #3994)