DEV Community

Cover image for How to Upload Multiple File with Progress Bar (ReactJS + Redux and ExpressJS)

How to Upload Multiple File with Progress Bar (ReactJS + Redux and ExpressJS)

Devin Ekadeni on February 25, 2020

If you've never been messing around with file upload before and you were given a task to do so, perhaps you will feel scared out of it (well, a lil...
Collapse
 
ashermiti profile image
Asher Mitilinakis

This is great, thank you!

I'm trying to do exactly what you mentioned at the end of the article and ensure that files go into cloud storage, specifically an AWS S3 bucket. Do you have any further article/walkthrough or tips on how to link it up and do just that?

Collapse
 
devinekadeni profile image
Devin Ekadeni

Unfortunately I don't have any expert experience on the backend side.
But all I could tell is if you're using the same backend side of this article (which using multer), whenever client upload file and hit the POST /file endpoint, backend side will receive the file which contain a lot of information (you could see it on the multer docs) and perhaps you could use its data to pass to AWS S3.

And if I do a quick search, turns out multer have another package that work along with S3 bucket, you can see it here
Goodluck!

Collapse
 
ashermiti profile image
Asher Mitilinakis

Amazing, thanks a lot!! :)

Collapse
 
noamatish profile image
Noamatish • Edited

This article is amazing.
Thank you very much!
I got one question though.
if i want to upload many images (around 250+) what would you recommend doing? i'm afraid this action will kill the page

Collapse
 
noamatish profile image
Noamatish

?

Collapse
 
devinekadeni profile image
Devin Ekadeni • Edited

My personal opinion it's just like you said, probably it will kill the page, so my suggestion is to add maximum files limitation for on going upload file (for example 10 max), then from the UI you should disable the dropdown area and give some message to the user.
It's a rare case to have people upload 250+ files at the same time, but this is my opinion.

Thread Thread
 
noamatish profile image
Noamatish

But what if i do need this?
There maybe situations that some one will upload 1000+ pictures.
What would you recommend in these situations? (photos can be also very heavy)

Thread Thread
 
devinekadeni profile image
Devin Ekadeni

No, my answer is still the same, IMO it will kill the page because of memory leaks, so i really wouldn't recommend doing that.
And can you elaborate more (perhaps with example) how do users able to upload 1000+ pictures at a time? Because I never find that case in any apps (at least for me).
But if you insist, honestly I don't have any valid answer for this one. Probably you should change the data structure or you can upload it by queuing every 5 files or....yeah sorry, I don't have any valid answer for this one.

Thread Thread
 
udayraj123 profile image
Udayraj Deshmukh

@noamatish you can checkout the p-limit package, it can serve the purpose of limiting number of uploads at a time while queueing the rest.
github.com/sindresorhus/p-limit

Collapse
 
leopintos10 profile image
leopintos10

Amazing article. Very well explained. Congrats.

Just one question, how to add the button to close the loading window, without affecting the progress logic? I saw you added the button layout on css but the button component it is not present.
Thanks in advance mate.

Collapse
 
devinekadeni profile image
Devin Ekadeni

Actually I also implemented this upload in my company, in my case I put the close button on the title upload box, but it will only be shown when all of the upload is finish (whether success or fail). In my case I would just remove all of the data from uploadProgressRedux when the close button is clicked and unmount the upload progress box.
But if you want to be able to close it while it's uploading, IMO you can try to add the close button and when it's clicked, unmount the upload progress box but don't have to remove the data from uploadProgressRedux. That way the progress will still be running on the background (haven't try it tho).
But personally thinking this would be bad for user experience, since they didn't know the upload progress status. It would be better to encourage user not to close the upload progress box until it's finish

Collapse
 
leopintos10 profile image
leopintos10

Thank you very much for your quick answer kind sir!! I really apreciate it!

Collapse
 
seyyed_sina profile image
Seyed Sina

thanks for explaining well around this,

For the scenario you said we have to call upload_api for each file that selected by user! I think this causes overload server if we upload many files together

In my case, I have a batchFile api that get multiple files together, but question is how can I get progress for each file?!

Collapse
 
sonthen profile image
Jason Thenneil

More article like this please!

Collapse
 
geunhojang profile image
geunhojang

Can I apply your code in my project of usb transfer files?

Collapse
 
devinekadeni profile image
Devin Ekadeni

I'm not sure, I have no experience using usb transfer files. But I personally think, if your transferred files structure are the same with my example, then it should work.

Collapse
 
frontend_io profile image
Jefferson Osagie Iyobosa

This is well explained. Very comprehensive! Bravo!

Collapse
 
devinekadeni profile image
Devin Ekadeni

Thank you, glad to hear that

Collapse
 
snappa profile image
snappa

Great article. Exactly what I was looking for.

Collapse
 
bhayward93 profile image
Ben Hayward

Thanks for taking the time to make this.

Collapse
 
asurakev profile image
AsuraKev

how to upload all files all at once and show the progress of each?

Collapse
 
devinekadeni profile image
Devin Ekadeni

Umm...actually that's what I explained on this article.
Perhaps you can try it on your local by using the repository.
Or did I misunderstand your question?

Collapse
 
platiplus profile image
Platiplus

Is there a way to make it simpler? Like to upload just one file? I used your code on my application but I'm having trouble to modify to just upload and control the state of one file. Could you advise?

Collapse
 
devinekadeni profile image
Devin Ekadeni

if you want to upload only 1 file at a time, you should remove props multiple on your input element and for onChange handler, you could just pass e.target.files[0] which contain the file value.
Then you can change the fileProgress structure on the redux into just 1 object value for example just define

const INITIAL_STATE = { 
    fileProgress: { }
    // the file will be 
   // { id: 1, file: file, progress: 0, cancelSource: source, status: 0 }
 }
Enter fullscreen mode Exit fullscreen mode

Then you should adjust the action, reducer, and useEffect of the UploadProgress (and not to mention adjust the components).
I'll just explain the main idea of what I could think of for the data structure perspective, the rest you should be able to tinkering by yourself, after all that's the beauty of programming, isn't it 😁. Goodluck!