0
\$\begingroup\$

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?

\$\endgroup\$

1 Answer 1

0
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.