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...
For further actions, you may consider blocking this person and/or reporting abuse
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?
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 /fileendpoint, 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!
Amazing, thanks a lot!! :)
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
?
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.
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)
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.
@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
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.
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
Thank you very much for your quick answer kind sir!! I really apreciate it!
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?!
More article like this please!
Can I apply your code in my project of usb transfer files?
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.
This is well explained. Very comprehensive! Bravo!
Thank you, glad to hear that
Great article. Exactly what I was looking for.
Thanks for taking the time to make this.
how to upload all files all at once and show the progress of each?
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?
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?
if you want to upload only 1 file at a time, you should remove props
multipleon your input element and foronChangehandler, you could just passe.target.files[0]which contain the file value.Then you can change the
fileProgressstructure on the redux into just 1 object value for example just defineThen 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!