Upload multiple images using react and axios

Question

I trying to upload multiple images about (5000 of size upto 50mb) and trying to figure out what would be the best way to do it.

right now i have this code:

 if (files.length) {
 files.forEach(file => {
 const formPayload = new FormData()
 formPayload.append('file', file.file)
 try {
 axios({
 baseURL: 'http://localhost:5000',
 url: '/file',
 method: 'post',
 data: formPayload,
 onUploadProgress: progress => {
 const { loaded, total } = progress
 const percentageProgress = Math.floor((loaded / total) * 100)
 dispatch(setUploadProgress(file.id, percentageProgress))
 },
 })
 dispatch(successUploadFile(file.id))
 } catch (error) {
 dispatch(failureUploadFile(file.id))
 }
 })
 }

but it uploads all images at once, it is alright to do so?

Answer 1

Given that there are a lot of files (5,000), I'd certainly recommend batching the upload process for many reasons; user experience being one of them.

With the help of eachLimit, you can modify your code like so:

import eachLimit from 'async/eachLimit'
const limit = 10
if (files.length) {
 eachLimit(files, limit, async (file) => {
 const formPayload = new FormData()
 formPayload.append('file', file.file)
 try {
 await axios({
 // config as per original question.
 })
 dispatch(successUploadFile(file.id))
 } catch (error) {
 dispatch(failureUploadFile(file.id))
 }
 })
}

Note that, for the third parameter to eachLimit, I've used an async iteratee function, and that I await the result from the axios call.