What is @uppy/status-bar?
@uppy/status-bar is a plugin for the Uppy file uploader that provides a status bar to show upload progress, pause/resume functionality, and error handling. It integrates seamlessly with Uppy to give users a visual representation of their file upload status.
What are @uppy/status-bar's main functionalities?
Basic Setup
This code demonstrates how to set up the @uppy/status-bar plugin with Uppy. It initializes Uppy and uses the StatusBar plugin, attaching it to the body of the document and configuring it to hide after the upload is finished.
const Uppy = require('@uppy/core');
const StatusBar = require('@uppy/status-bar');
const uppy = Uppy();
uppy.use(StatusBar, {
target: 'body',
hideAfterFinish: true
});
Customizing Status Bar
This code shows how to customize the status bar by changing its target element, keeping it visible after the upload is finished, and showing detailed progress information.
const Uppy = require('@uppy/core');
const StatusBar = require('@uppy/status-bar');
const uppy = Uppy();
uppy.use(StatusBar, {
target: '#upload-status',
hideAfterFinish: false,
showProgressDetails: true
});
Handling Upload Events
This code demonstrates how to handle upload events such as 'upload-success' and 'upload-error' with Uppy and the StatusBar plugin. It logs the results of successful uploads and errors to the console.
const Uppy = require('@uppy/core');
const StatusBar = require('@uppy/status-bar');
const uppy = Uppy();
uppy.use(StatusBar, {
target: 'body'
});
uppy.on('upload-success', (file, response) => {
console.log('Upload successful:', file, response);
});
uppy.on('upload-error', (file, error) => {
console.error('Upload error:', file, error);
});
Other packages similar to @uppy/status-bar
react-dropzone
react-dropzone is a simple React component for creating file drop zones. It provides basic file upload functionality but lacks the built-in status bar and progress tracking features of @uppy/status-bar. It is more suitable for simple use cases where a full-featured upload interface is not required.
fine-uploader
fine-uploader is a comprehensive JavaScript library for file uploads. It provides a wide range of features, including progress bars, retry functionality, and chunked uploads. However, it is not as modular or easy to integrate with modern frameworks as Uppy and its plugins.
@uppy/status-bar
The status-bar shows upload progress and speed, ETAs, pre- and post-processing information, and allows users to control (pause/resume/cancel) the upload.
Best used together with a simple file source plugin, such as @uppy/file-input or @uppy/drag-drop, or a custom implementation. It is also included in the @uppy/dashboard plugin.
Uppy is being developed by the folks at Transloadit, a versatile file encoding service.
Example
const Uppy = require('@uppy/core')
const StatusBar = require('@uppy/status-bar')
const uppy = Uppy()
uppy.use(StatusBar, {
target: 'body',
hideUploadButton: false,
showProgressDetails: false,
hideAfterFinish: true
})
Installation
$ npm install @uppy/status-bar --save
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
Documentation for this plugin can be found on the Uppy website.
License
The MIT License.
0.28.0
| Package | Version | Package | Version |
|-|-|-|-|
| uppy | 0.28.0 | @uppy/xhr-upload | 0.28.0 |
| @uppy/core | 0.28.0 | @uppy/react | 0.28.0 |
| @uppy/dashboard | 0.28.0 | @uppy/transloadit | 0.28.0 |
| @uppy/dropbox | 0.28.0 | @uppy/tus | 0.28.0 |
| @uppy/form | 0.28.0 | @uppy/url | 0.28.0 |
| @uppy/informer | 0.28.0 | @uppy/webcam | 0.28.0 |
| @uppy/utils | 0.28.0 | @uppy/url | 0.28.0 |
| @uppy/thumbnail-generator | 0.28.0 | @uppy/status-bar | 0.28.0 |
| @uppy/redux-dev-tools | 0.28.0 | @uppy/react | 0.28.0 |
| @uppy/provider-views | 0.28.0 | @uppy/progress-bar | 0.28.0 |
| @uppy/instagram | 0.28.0 | @uppy/informer | 0.28.0 |
| @uppy/google-drive | 0.28.0 | @uppy/golden-retriever | 0.28.0 |
| @uppy/form | 0.28.0 | @uppy/file-input | 0.28.0 |
| @uppy/dropbox | 0.28.0 | @uppy/drag-drop | 0.28.0 |
| @uppy/dashboard | 0.28.0 | @uppy/companion | 0.15.0 |
| @uppy/aws-s3 | 0.28.0 | @uppy/aws-s3-multipart | 0.28.0 |
- @uppy/core: bring back i18n locale packs (#1114 / @goto-bus-stop, @arturi)
- @uppy/companion: option validation (can use https://npm.im/ajv + JSON schema)
- @uppy/companion: Remove duplicate typescript dependency (#1119 / @goto-bus-stop)
- @uppy/companion: ⚠️ breaking Migrate provider adapter to Companion: saves 5KB on the frontend, all heavy lifting moved to the server side (#1093 / @ifedapoolarewaju)
- @uppy/core: single-use Uppy instance: adds an
allowMultipleUploads
option to @uppy/core. If set to false, uppy.upload() can only be called once. Afterward, no new files can be added and no new uploads can be started. This is intended to serve the <form>
-like use case. (#1064 / @goto-bus-stop) - @uppy/dashboard: Auto close after finish using
closeAfterFinish: true
(#1106 / @goto-bus-stop) - @uppy/dashboard: call
hideAllPanels
after a file is added in Dashboard, instead of toggleAddFilesPanel(false)
that didn’t hide some panels - @uppy/status-bar: ⚠️ breaking Add spinner, pause/resume as small round buttons, different color for encoding; Added separate options for hiding pause/resume and cancel button; Added more statuses to the Dashboard, like “Upload complete”, “Upload paused” and “Uploading 5 files” (#1097 / @arturi)
- @uppy/url: add end2end test for Url plugin (#1120 / @ifedapoolarewaju)
- @uppy/transloadit: add end2end test for @uppy/transloadit (#1086 / @arturi)
- @uppy/thumbnail-generator: Add thumbnail generation integration test (#970 / @goto-bus-stop)
- @uppy/thumbnail-generator: Allow to constrain thumbnail height, fixes #979 (@richartkeil / #1096)
- @uppy/thumbnail-generator: Fix JPG previews on Edge (#1092 / @goto-bus-stop)
- @uppy/aws-s3: use RequestClient, it contains the Uppy Companion specific stuff, so we don't have to think about that when working on the S3 plugin. (#1091 / @goto-bus-stop)
- @uppy/transloadit: Add
COMPANION_PATTERN
constant (#1104 / @goto-bus-stop) - @uppy/transloadit: Error tweaks (#1103 / @goto-bus-stop)
- @uppy/webcam: Fix getting data from Webcam recording if mime type includes codec metadata (#1094 / @goto-bus-stop)
- @uppy/core: remove upload-cancel event, file-removed should be enough (#1069 / @arutri)
- meta: document events, deprecate unused (#1069 / @arturi)
- meta: New demo video/gif and website frontpage code sample (#1099 / @arturi)
- meta: Update react.md (#1110 / @asmt3)
- meta: Add missing addMoreFiles string to locale (#1111 / @FWirtz)
- meta: Release script improvements: generate nicer releases and a nicer commit history. (#1122 / @goto-bus-stop)
- meta: Add release documentation. eg: test on transloadit website, check examples on the uppy.io website (@goto-bus-stop)