在 FineUploader 中预处理文件期间如何显示进度？

Question

I apply some preprocessing to files when uploading them with FineUploader (to Azure). Specifically, this means calculating the file's MD5 hash and possibly editing some specific elements of the bytes. I've implemented this and attached my code to the onSubmit event .

Unfortunately, this process can take quite a lot of time, and users typically submit anywhere between 18 to 2000 files simultaneously. FineUploader doesn't add them to the UI nor does it show progress at this stage, leaving my users in the dark. They will add more files, thinking that they did something wrong, and make other incorrect decisions.

I already intend to do the processing with a queue of web workers, but this will only makes the UI more responsive, it won't help showing some feedback to my users. I'm wondering if I should switch to a different event such as onValidate , or if there is some other approach I could consider. What do you think?

Answer 1

Showing progress was easy. I added the following HTML to the template:

<span class="preprocessing-selector qq-drop-processing qq-hide">
    <span>Pre-processing files...</span>
    <span class="preprocessing-spinner-selector qq-drop-processing-spinner"></span>
</span>

In the onFinish handler of my custom processing I added $(".preprocessing-selector").addClass("qq-hide"); and I added $(".preprocessing-selector").removeClass("qq-hide"); to the onSubmit handler of FineUploader.

That was sufficient to indicate progress.

---

For those interested in knowing how I added preprocessing into the pipeline, here's the grand overview and explanation. As far as I can tell from our preliminary test results there are no performance issues.

I used a gist called workcrew.js and applied some changes to use it for my purposes. It manages a pool of Web Workers and provides a simple API. I used the onFinish event to hide the progress indicator.

Whenever a file is submitted, I pass it to workcrew.js for preprocessing and return a promise to FineUploader. The workers return the MD5 hash, and, if preprocessing was necessary, the modified File object and its new MD5 hash.

• If we've seen this MD5 hash before (duplicate) we reject the promise.
• If we got a modified File object, we reject the promise and submit the new file using addUploads .
• Otherwise we set the MD5 hash to benefit from Azure's MD5 hash verification mechanism and resolve the promise.

One catch: you have to make sure to use unshiftWork instead of pushWork when sending a file to workcrew.js, so that processed files that have been resubmitted are handled first. That way processing and uploading happens concurrently. Otherwise you'll be processing all submitted files first, and then uploading, which is way less efficient.