@uppy/status-bar
Advanced tools
@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.
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);
});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 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.
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.
const Uppy = require('@uppy/core')
const StatusBar = require('@uppy/status-bar')
const uppy = new Uppy()
uppy.use(StatusBar, {
target: 'body',
hideUploadButton: false,
showProgressDetails: false,
hideAfterFinish: true
})
$ npm install @uppy/status-bar
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.
1.9.0
Released: 2020-02-11
⚠️ 1.9.0 and all related packages have been deprecated due to an incorrect Lerna/npm published release. Please update all packages to the next patch version, see #1.9.1.
This release adds support for the new Instagram API, image and archive icons to the Dashboard, fixes upload retries and moves OneDrive out of beta.
| Package | Version | Package | Version | |-|-|-|-| | @uppy/aws-s3-multipart | 1.5.0 | @uppy/onedrive | 1.0.0 | | @uppy/aws-s3 | 1.5.0 | @uppy/progress-bar | 1.3.5 | | @uppy/companion | 1.9.0 | @uppy/provider-views | 1.5.3 | | @uppy/core | 1.8.0 | @uppy/react | 1.4.3 | | @uppy/dashboard | 1.6.0 | @uppy/robodog | 1.5.0 | | @uppy/drag-drop | 1.4.3 | @uppy/status-bar | 1.5.0 | | @uppy/dropbox | 1.3.6 | @uppy/thumbnail-generator | 1.5.3 | | @uppy/facebook | 0.2.3 | @uppy/transloadit | 1.5.0 | | @uppy/file-input | 1.4.3 | @uppy/tus | 1.5.3 | | @uppy/form | 1.3.6 | @uppy/url | 1.4.3 | | @uppy/golden-retriever | 1.3.5 | @uppy/utils | 2.2.0 | | @uppy/google-drive | 1.4.0 | @uppy/webcam | 1.5.2 | | @uppy/informer | 1.4.0 | @uppy/xhr-upload | 1.5.0 | | @uppy/instagram | 1.3.6 | uppy | 1.9.0 | | @uppy/locales | 1.11.1 | - | - |
google with drive (#2044 / @ifedapoolarewaju)FAQs
A progress bar for Uppy, with many bells and whistles.
The npm package @uppy/status-bar receives a total of 98,588 weekly downloads. As such, @uppy/status-bar popularity was classified as popular.
We found that @uppy/status-bar 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
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.