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.