Programmer from Birmingham, AL, currently employed as a full stack web developer for EBSCO (working primarily with Magento), and learning Rust in my free time.
Something to note about the progress bar example is that it may not finish for users who have fast connections. I was testing it out and noticed that a progress event was fired around the 1% mark for a couple of files, but wasn't fired again before readyState indicated that the file upload was done. For a production implementation, you'll probably also want to hook into the loadend event to account for this. Here's a slightly modified version of the above example that demonstrates this:
fileUploader.addEventListener('change',(event)=>{constfiles=event.target.files;constfile=files[0];reader.readAsDataURL(file);reader.addEventListener('progress',updateProgressBar);reader.addEventListener('loadend',updateProgressBar);functionupdateProgressBar(event){if(!event.loaded||!event.total){return;}constpercent=(event.loaded/event.total)*100;progress.value=percent;document.getElementById('progress-label').innerHTML=Math.round(percent)+'%';if(percent===100){letmsg=`<span style="color:green;">File <u><b>${file.name}</b></u> has been uploaded successfully.</span>`;feedback.innerHTML=msg;}}});
Something to note about the progress bar example is that it may not finish for users who have fast connections. I was testing it out and noticed that a
progressevent was fired around the 1% mark for a couple of files, but wasn't fired again beforereadyStateindicated that the file upload was done. For a production implementation, you'll probably also want to hook into theloadendevent to account for this. Here's a slightly modified version of the above example that demonstrates this:Great point Payton! I am gonna look into that and modify. Thanks for reading and commenting.