How to get response while uploading multiple images

Question

I've been struggling to get the response when i am uploading multiple images.The API is supposed to send me some response.(However,on uploading a single image,I am getting a valid response.) Here is the code:

fileChangedHandler = (event) => {
    const {files} = this.state
    this.setState({ files: [...files, ...event.target.files] })
    const uploaders = files.map(file=>{
        let data = new FormData()
        data.append('image',file)
        return  axios.post('/web/v1.0/upload',data,{
            onUploadProgress: function (progressEvent) {
              console.log(Math.floor((progressEvent.loaded * 100) / progressEvent.total));}
            }).then(response=>{
            console.log(response.data)
        }).catch(error=>{
            console.log(error.response.data)
        })
    })
    axios.all(uploaders).then(() => {

        console.log("All images uploaded")
      });
  }

I am just getting "All images uploaded" in the console.

Try making each of the upload call as `Promise` and then use `Promise.all`. — Harshit Agarwal, Jul 31 '19 at 11:43
It got resolved with the help of previous answer.Thanks anyway :) — Abhinav, Jul 31 '19 at 12:15

score 0 · Accepted Answer · edited Jul 31 '19 at 06:27

0

Try putting a response variable inside the callback.

axios.all(uploaders).then((response) => {

 console.log("All images uploaded", response)

});

Ideally, response should be an array of strings.

edited Jul 31 '19 at 06:27

answered Jul 31 '19 at 06:02

Oreoluwa Aboluwarin

181
1
8

How to get response while uploading multiple images

1 Answers1