@uppy/dashboard

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.

README

@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.

Changelog

3.7.0

Released: 2023-04-04

| Package | Version | Package | Version | | ---------------------- | ------- | ---------------------- | ------- | | @uppy/aws-s3 | 3.0.6 | @uppy/status-bar | 3.1.0 | | @uppy/aws-s3-multipart | 3.1.3 | @uppy/transloadit | 3.1.2 | | @uppy/companion | 4.4.0 | @uppy/tus | 3.0.6 | | @uppy/companion-client | 3.1.2 | @uppy/unsplash | 3.2.0 | | @uppy/core | 3.1.2 | @uppy/url | 3.3.0 | | @uppy/dashboard | 3.3.2 | @uppy/utils | 5.2.0 | | @uppy/locales | 3.1.0 | @uppy/xhr-upload | 3.1.1 | | @uppy/provider-views | 3.2.0 | uppy | 3.7.0 | | @uppy/react | 3.1.1 | | |

• @uppy/aws-s3-multipart,@uppy/aws-s3,@uppy/tus,@uppy/xhr-upload: make sure that we reset serverToken when an upload fails (Mikael Finstad / #4376)
• @uppy/aws-s3-multipart: do not auto-open sockets, clean them up on abort (Antoine du Hamel)
• @uppy/aws-s3: Update types (Minh Hieu / #4294)
• @uppy/companion-client: do not open socket more than once (Artur Paikin)
• @uppy/companion: add service: 'companion' to periodic ping (Mikael Finstad / #4383)
• @uppy/companion: add connection keep-alive to dropbox (Mikael Finstad / #4365)
• @uppy/companion: add missing env variable for standalone option (Mikael Finstad / #4382)
• @uppy/companion: add S3 prefix env variable (Mikael Finstad / #4320)
• @uppy/companion: allow local ips when testing (Mikael Finstad / #4328)
• @uppy/companion: fix typo in redis-emitter.js (Ikko Eltociear Ashimine / #4362)
• @uppy/companion: merge Provider/SearchProvider (Mikael Finstad / #4330)
• @uppy/companion: only body parse when needed & increased body size for s3 (Mikael Finstad / #4372)
• @uppy/core: fix bug with setOptions (Nguyễn bảo Trung / #4350)
• @uppy/locales: locales: add es_MX (Kevin van Zonneveld / #4393)
• @uppy/locales: locales: add hi_IN (Kevin van Zonneveld / #4391)
• @uppy/provider-views: fix race condition when adding folders (Mikael Finstad / #4384)
• @uppy/provider-views: UI: Use form attribite with a form in doc root to prevent outer form submit (Artur Paikin / #4283)
• @uppy/transloadit: fix socket error message (Artur Paikin / #4352)
• @uppy/tus: do not auto-open sockets, clean them up on abort (Antoine du Hamel)
• meta: add version info in the bundlers CI (Antoine du Hamel / #4386)
• meta: deploy to Heroku on every companion commit (Mikael Finstad / #4367)
• meta: example: migrate redux to ESM (Antoine du Hamel / #4158)
• meta: fix all ESLint warnings and turn them into errors (Antoine du Hamel / #4398)
• meta: fixup! website: update links to work under the new URL (Antoine du Hamel / #4371)
• meta: remove duplicate outdated OSS support docs (Mikael Finstad, Artur Paikin / #4364)
• meta: use overrides to make sure no uppy package is fetch from npm (Antoine du Hamel / #4395)
• website: add a deprecation notice and a link to the new website (Antoine du Hamel / #4370)
• website: fix home page (Antoine du Hamel)
• website: Remove the website (Merlijn Vos / #4369)
• website: update links to work under the new URL (Antoine du Hamel / #4371)