@uppy/status-bar

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.

README

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

Changelog

1.6.0

Released: 2019-11-04

This release adds Icelandic translations and a long-awaited setOptions API to change configuration (including language) at runtime.

| Package | Version | Package | Version | |-|-|-|-| | @uppy/aws-s3-multipart | 1.3.4 | @uppy/onedrive | 0.1.2 | | @uppy/aws-s3 | 1.3.3 | @uppy/progress-bar | 1.3.2 | | @uppy/companion | 1.6.0 | @uppy/provider-views | 1.5.0 | | @uppy/core | 1.6.0 | @uppy/react | 1.4.0 | | @uppy/dashboard | 1.5.0 | @uppy/robodog | 1.4.0 | | @uppy/drag-drop | 1.4.0 | @uppy/status-bar | 1.4.0 | | @uppy/dropbox | 1.3.3 | @uppy/thumbnail-generator | 1.5.0 | | @uppy/facebook | 0.2.0 | @uppy/transloadit | 1.4.0 | | @uppy/file-input | 1.4.0 | @uppy/tus | 1.5.0 | | @uppy/form | 1.3.3 | @uppy/url | 1.4.0 | | @uppy/golden-retriever | 1.3.2 | @uppy/utils | 2.1.0 | | @uppy/google-drive | 1.3.3 | @uppy/webcam | 1.4.0 | | @uppy/informer | 1.3.2 | @uppy/xhr-upload | 1.4.0 | | @uppy/instagram | 1.3.3 | uppy | 1.6.0 | | @uppy/locales | 1.9.0 | - | - |

• @uppy/companion: Add S3 useAccelerateEndpoint option (@steverob, #1884)
• @uppy/companion: only set Access-Control-Allow-Credentials header when origin is whitelisted (@ifedapoolarewaju, #1901)
• @uppy/companion: set a more visible thumbnail size for dropbox (@ifedapoolarewaju, #1917)
• @uppy/companion: upgrade connect-redis (@ifedapoolarewaju, #1911)
• @uppy/core: Allow passing meta type to upload-success and complete events (@MatthiasKunnen, #1879)
• @uppy/core: add UppyFile.response typing (@superhawk610, #1882)
• @uppy/core: add setOptions API (@arturi, #1728)
• @uppy/core: skip upload-success event for a file that has been removed (@julianocomg, #1875)
• @uppy/facebook: use grid view with big image previews for album folders (@ifedapoolarewaju, #1886)
• @uppy/locales: Added Icelandic :iceland: (@olitomas, #1916)
• @uppy/provider-views: Fix sizes for smaller images in grid layout (@arturi, #1897)
• @uppy/provider-views: provider views breadcrumbs is failed to render (@huydod, #1914)
• @uppy/transloadit: send Transloadit-Client header with HTTP API requests (@goto-bus-stop, #1919)
• @uppy/tus: terminate tus upload when cancelling instead of just pausing and letting it expire (@ifedapoolarewaju, #1909)
• @uppy/utils: accept sync functions in wrapPromiseFunction() (@goto-bus-stop, #1910)
• docs: README.md wording and formatting changes (@sercraig, #1900)
• docs: clarify that 'upload-success' and 'upload-error' response parameter is specific to some uploaders (@bambii7, #1921)
• docs: add OneDrive to Companion documentation (@ifedapoolarewaju, #1925)
• examples: support COMPANION_AWS_ENDPOINT in aws-companion example so it can be used with other S3-compatible services (@goto-bus-stop, 1ab63aa)
• website: improve support page design (@arturi, #1913)