5.16.2

Progress Bars

Note

This feature is available in Chrome (except in iOS), Firefox, Safari, IE10+, & Opera 15+ due to their support for the ProgressEvent interface. Note that progress reporting is not supported in Android's stock browser, or Chrome in iOS.

Seeing your uploads progress can be a satisfying feeling, especially when they finish. With Fine Uploader UI mode, a progress bar is included in the UI, and -- just like any other Fine Uploader UI feature -- it can be completely rebuilt and rebranded in Core mode.

Fine Uploader provides two concepts of progress: per-file progress, and total progress.

Per-File Progress

If using Fine Uploader UI, a progress bar will be drawn and updated for each file as the upload progresses. Note that you must have the progress element in your template. Here's what the progress element may look like in your template:

<div class="qq-progress-bar-container-selector">
    <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>

You can remove or change the non-selector CSS classes, tags, etc to suit your application.

There is also a progress event, that can be used to feed your own custom progress bar if you are using Fine Uploader Core.

Total Progress

Version 4.4 brings built-in total progress tracking. If using Fine Uploader UI, a total progress bar will be rendered and updated automatically for you, provided you have the total progress module included in the source and the total progress element is present in your template. Here's what the total progress element may look like in your template:

<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
    <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>

As with all other template elements, you can remove or change the non-selector CSS classes, tags, etc to suit your application.

Fine Uploader core users can easily feed their own custom total progress bar by listening to the totalProgress events that Fine Uploader will trigger.

Total progress represents the upload progress of all files in the current batch of files. Once all files have finished uploading (failed or successful), total progress calculations are complete and will restart once new files are submitted.

Total progress will be updated, and the totalProgress event will be triggered whenever: An individual file's progress changes. The total size of an individual file changes (such as for scaled images, as the sizes of these are not known until they are generated just before the upload begins). Whenever a file is added. Whenever a file is canceled.

In Fine Uploader UI, the total progress bar will be hidden once it reaches 100%, or once there are no longer any files in progress.