Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@uppy/status-bar

Package Overview
Dependencies
Maintainers
5
Versions
101
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uppy/status-bar

A progress bar for Uppy, with many bells and whistles.

  • 1.5.0
  • Source
  • npm
  • Socket score
Version published
Weekly downloads
129K
decreased by-24.65%
Maintainers
5
Weekly downloads
 
Created

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.

Keywords

FAQs

Package last updated on 11 Feb 2020

Did you know?

Socket

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.

Install

Related posts

Node.js Implements Stricter Policies for Semver-Major Pull Requests Ahead of Release Deadlines

Security News

Node.js Implements Stricter Policies for Semver-Major Pull Requests Ahead of Release Deadlines

Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.

By Sarah Gooding  -  Nov 08, 2024
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc