Progress.up HTML5 File Upload Progress indicator

What is this?

This is a HTML5 multiple files Upload plugin with progress bar indicator.

This uses the HTTP File API protocol to show continuous progress.

This is the very first attempt to create a clean no frills upload plugin in 100% Javascript. Now available for Angular, Vue and React.

Canonical home page

Demos will be added soon to the above page :point_up: .

Instructions

Plain js

	$ npm add progress-up

Angular 13+

	$ npm add progress-up/angular

Vue 3

	$ npm add progress-up/vue

React.js

	$ npm add progress-up/react

Detailed instructions

• Developer docs
• Live demo
• Vue.js
• Angular
• React

Screenshots gallery

This is before upload

This is after uploading

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.

This project was written ground up with latest technology as of Oct 22, 2022.

However the status of project is Beta.

Most testing is needed. If you volunteer please get in touch.

How to build and run as plain js

Instructions or frameworks coming soon

$ git clone https://github.com/girish1729/progress.up
$ cd progress.up/html5-upload
$ yarn install

# or

$ npm install

$ mkdir uploads

$ npm start

Go to http://localhost:2324

and try uploading files.

You may use manual upload.

Drag and drop into the shaded area is not implemented yet.

The uploaded files are present in html5-upload/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.

Also the name of the <input type='file attribute should myFiles.

Frontend - the plugin itself

It is using the HTML5 File API.

This is a clean way to get progress indicator for file uploads.

Screencast of upload

Next steps

Plugins for

• Vue.js
• Angular 12
• React JS

are on the way.

• Adding drag and drop and image preview.

• Options for the plugin (theming, backend endpoint)

If you wish to collaborate or send pull requests please get in touch using my Github profile.

If you cannot write code, then buying me a coffee can work as well.

Contact

You can DM me on Twitter for help/suggestions.

You can follow me for updates.

Tweet this to followers

Buy me a coffee to accelerate development