HTML5 multiple file uploader with progress display

Progress-up fetches files from local disk, shows previews and uploads in parallel. Has size and MIME filters.

Works with

What is Progress-up?

Uploading gif

Uploading gif

A HTML5 multiple files Upload plugin with progress bar indicator and file preview.

It uses the HTTP File API to show continuous progress.

Now available for

  • Angular
  • Vue
  • Svelte
  • React

in addition to vanilla Javascript.

A sample screenshot of the preview function.

More stats

More stats

Detailed instructions

Why should you care?

If you allow multiple large files upload then a progress indicator is a cool way to give user feedback.

Nowadays HTML5 File API based progress is the best way to achieve your goal.

How to build and run as plain js

$ git clone https://github.com/girish1729/progress.up
$ cd progress.up/backend
$ yarn install

Or

$ npm install

$ mkdir uploads

$ npm start

Now head to http://localhost:2324

to try uploading files.

The uploaded files are present in backend/uploads folder.

Backend

This backend is Node.js HTTP server express.js with multer middleware

This ensures that this code is platform agnostic. Most issues with file upload plugins extant today hover around not specifying backend correctly. Not making it easy to use. Not explaining what should be the input file name attribute etc.

We require a backend that accepts multipart/form-data as upload protocol.

Please also ensure the file names array in input field matches the backend configuration.

There is also a test upload feature to check if upload protocol works.

Features

🔷 Lightweight and modular 🎈

🔷 Plugin-based architecture 🔌

🔷 No dependencies 🎩

🔷 Track uploads with progress indicator 👣

🔷 Drag and drop 🛹

🔷 Files are previed before upload 🎬

🔷 24 hour turnaround for github issues 🏂

🔷 Open source with rich documentation 🏂

🔷 No frills sleek user interface 🏖

🔷 Dark mode support 🌓

🔷 Free to the world, forever 🥁

🔷 Available for all popular web frameworks 📚