Multi file upload in react

Question

I have to upload multiple files(one by one(not at a time)) to the server using rest API.

import React from "react";
import FlashMessage from "react-flash-message";
export class FileUpload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedFile: null,
      details: "",
      name: "",
      list_details: [],
      list_name: []
    };
    this.onChangeHandler = this.onChangeHandler.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  onChangeHandler = event => {
    this.setState({
      selectedFile: event.target.files,
      showMessage: false
    });
  };

  handleSubmit = event => {
    event.preventDefault();

    /* Here I wanna send one file at a time , but it sends multiple files at a time */

    const formData = new FormData();
    for (var x = 0; x < this.state.selectedFile.length; x++) {
      formData.append("inputFile", this.state.selectedFile[x]);
    }

    fetch("url", {
      method: "POST",
      body: formData
    })
      .then(res => {
        return res.json();
      })
      .then(res => {
        this.setState({
          showMessage: true
          //  details: res.data.details,
          //name: res.data.name
        });

        //console.log("Data is", res.data.name) //displays name in the console
      })
      .catch(error => console.log("ERROR message"));
  };

  render() {
    /* After storing multiple files in the server, response data contains name,details value.
Page shouldn't refresh.  Now i upload files and response data should be displayed in the page.since i don't refresh the page, I upload one more file, this time page should display this file's response data as well as previous ones. Its format should be like this[1.Name1:details1,2.Name2:details2 etc] */

    // this.setState({
    //  list_details: list.concat(details),
    // list_name: list_name.concat(name)
    //});

    return (
      <div>
        {this.state.showMessage && (
          <div>
            <FlashMessage duration={18000}>
              <strong>files have been uploaded successfully !!</strong>
            </FlashMessage>
          </div>
        )}

        <form onSubmit={this.handleSubmit}>
          <label>
            Upload a file: <br />
            <br />
            <input
              type="file"
              name="file"
              multiple
              onChange={this.onChangeHandler}
            />
          </label>
          <br />
          <br />
          <button type="submit">Upload</button>
        </form>
        <ol>
          {/* code i have tried to display response data[1.Name1:detail1,2.Name2:detail2]  */}
          {/* // {this.state.list_name.map((k) =>
               //    <li>{k} :</li>
              // )}
              // {this.state.list_details.map((k) =>
               //    <li>{k}</li>
               //)}  */}
        </ol>
      </div>
    );
  }
}

I have one more requirement: I have to add a listener so that the program should wait until I get response from the back end? Should I use async/await method??

Please help me.. Thanks in advance.

Deykun · Accepted Answer · 2020-03-12 15:08:10Z

1

Instead of appending all files to one formData and sending it, you can append and send one file in for loop you already have.

const formData = new FormData();
for (var x = 0; x < this.state.selectedFile.length; x++) {
  const formData = new FormData();
  formData.append('inputFile', this.state.selectedFile[x])
  fetch('url' ....
}

The code above will run synchronously (selectedFile.length files will be send at the same time). With pLimit you can tweak that number.

import pLimit from 'p-limit'

...

const limit = pLimit(30)
let promises = this.state.selectedFile.map( file=> {
    return limit(() => fetch logic )
})

Promise.all(promises).then( () => console.log('All files have been uploaded.') )

edited Mar 12, 2020 at 15:08

answered Mar 12, 2020 at 14:38

Deykun

1,26011 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multi file upload in react

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