@uppy/dashboard
Advanced tools
@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.
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
});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 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 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.
Dashboard is a universal UI plugin for Uppy:
Uppy is being developed by the folks at Transloadit, a versatile file encoding service.
import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
const uppy = new Uppy()
uppy.use(Dashboard, {
target: 'body',
inline: true,
})
$ npm install @uppy/dashboard
We recommend installing from npm and then using a module bundler such as Webpack, Browserify or Rollup.js.
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 for this plugin can be found on the Uppy website.
2.2.0
Released: 2021-10-06
This release marks a major version for @uppy/unsplash plugin which is now production-ready. It also includes various fixes and improvements such as fix to @uppy/transloadit plugin and adds onDrop event to @uppy/drop-target.
| Package | Version | Package | Version | |-|-|-|-| | @uppy/angular | 0.2.4 | @uppy/provider-views | 2.0.3 | | @uppy/aws-s3-multipart | 2.1.0 | @uppy/react-native | 0.2.3 | | @uppy/aws-s3 | 2.0.4 | @uppy/react | 2.1.0 | | @uppy/box | 1.0.3 | @uppy/redux-dev-tools | 2.0.2 | | @uppy/companion-client | 2.0.2 | @uppy/robodog | 2.1.0 | | @uppy/companion | 3.1.0 | @uppy/screen-capture | 2.0.3 | | @uppy/core | 2.1.0 | @uppy/status-bar | 2.1.0 | | @uppy/dashboard | 2.1.0 | @uppy/store-default | 2.0.1 | | @uppy/drag-drop | 2.0.3 | @uppy/store-redux | 2.0.1 | | @uppy/drop-target | 1.1.0 | @uppy/svelte | 1.0.4 | | @uppy/dropbox | 2.0.3 | @uppy/thumbnail-generator | 2.0.4 | | @uppy/facebook | 2.0.3 | @uppy/transloadit | 2.0.3 | | @uppy/file-input | 2.0.3 | @uppy/tus | 2.1.0 | | @uppy/form | 2.0.3 | @uppy/unsplash | 2.0.0 | | @uppy/golden-retriever | 2.0.4 | @uppy/url | 2.0.3 | | @uppy/google-drive | 2.0.3 | @uppy/utils | 4.0.2 | | @uppy/image-editor | 1.0.3 | @uppy/vue | 0.4.2 | | @uppy/informer | 2.0.3 | @uppy/webcam | 2.0.3 | | @uppy/instagram | 2.0.3 | @uppy/xhr-upload | 2.0.4 | | @uppy/locales | 2.0.2 | @uppy/zoom | 1.0.3 | | @uppy/onedrive | 2.0.3 | remark-lint-uppy | 0.0.3 | | @uppy/progress-bar | 2.0.3 | uppy | 2.2.0 |
package.json version constraints (#3210 / @ajkachnic)prepareUploadParts on fail for @uppy/aws-s3-multipart (#3224 / @Murderlon)Object.fromEntries is not available on Node.js v10.x (#3209 / @aduh95)@uppy/core types (#3230 / @lucax88x)Uppy class to its own module (#3225 / @aduh95)CopyLinkButton (#3235 / @Murderlon)onDrop events (#3238 / @Murderlon)Cropper is loaded as ESM (#3218 / @aduh95)showProgressDetails is true (#3174 / @Murderlon)opts.headers as a function in @uppy/tus (#3221 / @danilat)@uppy/unsplash production ready (#3196 / @Murderlon)this.uppy is undefined error (#3207 / @aduh95)plugin_list.ejs (#3166 / @YukeshShr)FAQs
Universal UI plugin for Uppy.
The npm package @uppy/dashboard receives a total of 128,201 weekly downloads. As such, @uppy/dashboard popularity was classified as popular.
We found that @uppy/dashboard demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 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
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.