How to Upload Multiple Image Files in a Single Call in Reactjs

Question

Other than workaround of calling fetch multiple times for multiple image files upload (looping through the files), on Frontend, How to upload multiple of image files by just calling fetch/Upload once? Could someone provide a simple example? Just like we do on Facebook.

Thanks in advance!

Update: I am done with looping logic in front end, now as there is loader on every image getting uploaded, Percent uploaded is getting calculated for all images in single value, how to split this value for all images separately?

This is a JS/fetch question, not a React question. Do you need them to be one request or are you just looking for a way to clean up your looping logic? — Nicky McCurdy
– Nicky McCurdy, Commented Jul 29, 2017 at 15:43
I was looking up for looping logic Done doing that. Now changing it to JS?Fetch question — Yogesh Devgun
– Yogesh Devgun, Commented Jul 29, 2017 at 15:44
@NickMcCurdy How to do this apart from for loop? I want upload to start and loader to change its value for all multiple images at the same time, as of now for loop uploading for the first image completes first and then starts for other images. — Yogesh Devgun
– Yogesh Devgun, Commented Jul 29, 2017 at 16:18
Are you asking how to wait until all images are done uploading? — Nicky McCurdy
– Nicky McCurdy, Commented Jul 29, 2017 at 16:20
No, as in answer code I have used for loop so uploading of the first image finishes first then starts for second and then so on.. I want to implement like Facebook do, that if we upload multiple images at the same time, uploading for all should start at same time. — Yogesh Devgun
– Yogesh Devgun, Commented Jul 29, 2017 at 16:23

Yogesh Devgun · Accepted Answer · 2017-07-29 15:46:23Z

Looping Logic

for (let i = 0; i <= e.target.files.length; i++){
      let reader = new FileReader();
      let file = e.target.files[i];
      var self = this
      reader.onloadstart = () => {
        self.setState({ImageUploader: true})
      }
      reader.onloadend = () => {
        var data = reader.result;
        if (!file.type.includes('image')) {
          alert('PLEASE CHOSE A IMAGE BRAH!')
        } else if (file.size / (1024 * 1024) > 5) {
          alert('PLEASE CHOSESmaller Image')
        } else {
          var url = 'https://api......'
          var ifd = new FormData();
          ifd.append('file', file)
          axios({url: url,method: 'put',
            onUploadProgress: function(progressEvent) {
              var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
              self.setState({Completed: percentCompleted})
            },  withCredentials: true, data: ifd}).then((res) => {
            this.setState({ImageUploader: false})
            this.setState({
              image_id: this.state.image_id.concat(res.data.reason.image_id)
            })
          })
          this.setState({
            file: file,
            imagePreviewUrl: this.state.imagePreviewUrl.concat(reader.result),
            noImage: false,
            ImageChoosen: true
          });
        }
      }
      reader.readAsDataURL(file)
    }

Collectives™ on Stack Overflow

How to Upload Multiple Image Files in a Single Call in Reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related