Getting started with Progress-up uploader

Progress-up is a simple file uploader easy to setup. It fetches files from local disk, and uploads them to the final destination.

It’s very simple to integrate with your existing application and lets you think about more important problems than building a file uploader. 😄

Progress-up has various plugins for web development frameworks for easy integration and quick setup.

It can also be used standalone. Check the demos below.

Here’s the simplest example html page with Progress-up (it uses a CDN bundle, while we recommend to use a bundler, see Installation):

Drag and drop, preview for most file types, simple filters based on size and MIME type are all available.

Installation

Progress-up can be setup by including it in a script tag with some CSS and HTML templating.

Angular

	$ npm install progress-up-angular
# or 
	$ yarn add progress-up-angular

Vue 3

	$ npm install progress-up-vue
# or 
	$ yarn add progress-up-vue

React.js

	$ npm install progress-up-react
# or 
	$ yarn add progress-up-react

Svelte

	$ npm install progress-up-svelte
# or 
	$ yarn add progress-up-svelte

Banned files

Once you determine the MIME filters and size limitations by configuring in the setup tab then the files that are chosen for upload that do not match the criterion are marked as unavailable for upload by marking them in red. Please check screenshots below for an idea how they look.

Banned files

Banned files

These files are left out whilst uploading but the previews are shown just like a normal file scheduled for upload.

The tabs in progress-up UI

The Upload tab

This is just a drag and drop and upload area. Underneath a line shows the vital parameters that are needed for upload with two buttons.

  • Begin uploading
  • Reset form

The items shown in the line are the progress indicator(one of the 10 choices) and the upload URL and files array name.

Main tab

Main tab

The Setup tab

The setup tab is the most important tab for configuring progress-up.

You can setup the MIME and size filter along side the upload URL, the files array and progress indicator.

Setup tab

Setup tab

The Stats tab

The stats tab is used for showing the statistics of an upload session.

These do not go away when you click at the reset form in the upload tab.

The statistics are collected for each session to tell you the details of each upload operation.

The number of files successfully sent, the time taken and other details.

Stats tab

Stats tab

The Help tab

The help tab serves as a quick reference for those new to progress-up.

Help tab

Help tab

Documentation

Browser Support

We aim to support recent versions of Chrome, Firefox, Safari and Edge.

Main tab

This is the tab where you drop files using Drag and Drop or using a file chooser. You can drop any number of files. You can reset the file selection using the reset button.

The `begin uploading` button will show up only when the backend configuration is available.

Main tab for uploading
Preview tab

The file preview is the highlight of `progress-up`. Each file type is shown with videos and audio files shown with ability to playback using HTML5 audio/video.

Preview of files to be uploaded
Stats tab

The statistics tab displays the total files uploaded, the time taken, the number of times the uploader was invoked for this session.

The reset form does not clear the stats display.

Stats window
Progress bar update

This is the video of the progress bar updating.

Progress bar update video
Drag and drop

The drag and drop works by showing a blue background when files are brought into drop area.

Drag and drop is standard in all uploaders these days.

Drag and drop
Uploading video

A video demonstration of the upload process.

You have 10 types of progress indicators. This video illustrates one such display.

Before uploading files
Banned files

Progress-up supports MIME and size filters to disallow certain file types from uploading.

Such files are shown in preview but not uploaded.

Banned files not scheduled for upload
Before upload

The main functionality of the progress-up uploader is preview. So this screenshot illustrates how you can see exactly which files are queued for upload.

For text files you can hover over the icon shown to see some portion of the text. Preview works for all known file types.

You are free to delete the files you don't want to upload by clicking the bin icon on top right corner of each file preview section.

Before uploading files
Dark mode preview

This is dark mode being shown. You can click at the top right corner sun or moon to switch to dark or light mode.

Dark mode preview
After upload

This view shows how the files after uploading show up in the uploader. The statistics shown at the top calculate the throughput and also displays the success and failure status of each file queued for upload.

If you have banned files they won't be uploaded.

Fully uploaded files
Help tab

The help tab shows you how to use `progress-up` explaining what each tab and fields stand for. Most things are intuitive as it is a simple interface. But this tab should clarify some question about some configuration parameter.

Help tab of progress-up
The setup tab

This is how you setup the file uploader plugin. Just determine the policy for upload, the file size you like the mime types you allow, the endpoint URL, the name of input field and you are pretty much set.

To check the upload protocol, it is better to run a test upload to ensure the setup is working.

Sunset in the mountains
The preview area

You can preview any file with as much detail as possible. This is a nice way to ensure you are uploading the right files. Preview is available for every file type around with maximum information shown `before uploading`.

Sunset in the mountains