@fedeghe/upload-web-worker NPM

upload-web-worker

Using a web worker to upload a file could not be easier:

Install dependency

yarn add upload-web-worker

use it

import uww from 'upload-web-worker'

export default () => <input
    type="file"
    multiple
    onChange={e => {
        [...e.target.files].forEach(
            file => uww.start({
                // method: 'PUT' // default
                /**
                 * PUT is the default, and actually
                 * the right verb
                 * 
                 * at the moment is THE ONLY one supported,
                 * thus you can skip that;
                 * 
                 * DO NOT expect the upload to work
                 * when setting a different verb 
                 */
                file,
                url: 'YOUR_UPLOAD_URL',
                headers: {
                    'Access-Control-Allow-Origin' : '*',
                    'Access-Control-Allow-Headers' :'*',
                    'Content-Type': 'multipart/form-data'
                },
                onStart: data => { /* ... */},
                onProgress: data => { /* ... + progress data */},
                onAbort: data => { /* ... */},
                onEnd: data => { /* ... */},
            })
        )
    }}
>

No request headers are sent by default, thus you will have to provide them

Listeners

All the onXXX listeners receive a data object which has always at least the following fields:

{
    "id": "UWW_1",
    "action": "start",
    "fileName": "2019_100_00000_F24ESEG_mpdf.pdf"
}

where

id: a unique id associated with this upload
action: the action
fileName: the upload file name, clearly

with the exception of onProgress which additionally receives inside data also a progress field as follows:

"progress": {
    "percent": 4.84,
    "loaded": 9601024,
    "total": 198546361 
}

where

percent: the progress percentage with two decimals
loaded: amount of Bytes already loaded
total: total amount of Bytes of the uploading file

Aborting

upload-web-worker offert two methods, one is start as we saw above, it returns an id for this upload (the same value that is passed to the listeners).

Using the id returned by start we can invoke abort passing this id:

uww.abort("UWW_1") // and this will trigger the onAbort if set

Minimal working example *

In case you cloned this repo you can start a minimal example, which also shows a possible simple way to show the uploading status for all the uploading files. In this example I'm using React.

Start a minimal local server which exposes a PUT enpoint on http://localhost:3000/upload