Adding time estimates for each file in progress upload

Question

I have a requirement to show time estimates for each file currently in progress of being uploaded. We are testing out the UI portion of the uploader and wondered if there is a way to add this in near the current % complete/size information that is currently displayed.

I don't really want to make my own entire custom UI just for that purpose.

Answer 1

You can add custom elements to Fine Uploader's template, and these elements will be rendered onto the DOM which you can than manipulate via JavaScript.

<script type="text/template" id="qq-template">
    <div class="qq-uploader-selector qq-uploader">
        ...
       <ul class="qq-upload-list-selector qq-upload-list">
            <li>
                ...
                <!-- custom element for updating with progress -->
                <span class="file-progress"></span>
            </li>
        </ul>
    ...
    </div>
</script>

You would then have to tie into Fine Uploader's events to update that element when the file is submitted (onSubmitted) or progresses (onProgress). To do this you'd use the getItemByFileId API method to select the file list item in the DOM, and then use JS to select that child element containing the progress element that you wanted to update, and -- naturally -- update it as you would.

// ...

onSubmitted: function (id, name) {
    var el = getElementByFileId(id) // retrieves the list element for this file id.
    // initialze the progress element, with 0% for example
},

// ...

onProgress: function (id, name, uploadedBytes, totalBytes) {
    // update as the file progresses ....
}

// ...

The documentation has more examples on how easy it is to add custom elements to the DOM.