Clever Geek Handbook

How to show progress in preprocessing files in FineUploader?

I am doing some preprocessing of files when uploading them with FineUploader (pre-Azure). In particular, this means computing the MD5 hash of the file and possibly editing some specific byte elements. I implemented this and attached my code to the onSubmit event .

Unfortunately, this process can take quite a long time, and users usually send files ranging from 18 to 2000 files at a time. FineUploader does not add them to the user interface and does not show progress at this stage, leaving my users in the dark. They will add more files, thinking they did something wrong, and make other wrong decisions.

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

+2


source to share


1 answer


It was easy to show progress. I added the following HTML 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 onFinish

my custom processing handler , I've added $(".preprocessing-selector").addClass("qq-hide");

and added FineUploader $(".preprocessing-selector").removeClass("qq-hide");

to the handler onSubmit

.

This was enough to indicate progress.

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



Great overview

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 an event onFinish

to hide the progress bar.

Whenever a file is uploaded, I feed it to workcrew.js for preprocessing and return the FineUploader promise. The workers return an MD5 hash and, if preprocessing is needed, the modified object File

and its new MD5 hash.

  • If we have seen this MD5 hash before (duplicate), we reject the promise.
  • If we receive a modified object File

    , we reject the promise and send the new file using addUploads

    .
  • Otherwise, we will set the MD5 hash to take advantage of the Azure MD5 hash validation mechanism and resolve the promise.

One catch: you have to use unshiftWork

instead pushWork

when submitting a file to workcrew.js to handle processed files that have been re-submitted are processed first. Thus, processing and loading take place at the same time. Otherwise, you will first process all uploaded files and then upload, which is less efficient.

+1


source






More articles:


All Articles