How can I upload multiple files in a React form to Flask API?

Question

I am experimenting with React and I am trying to upload multiple images to my API in flask for saving. I was able to figure out how to upload a single file, but am struggling to convert to multiple. Here is the code for single upload.

FLASK

@app.route('/upload',  methods={"POST"})
def upload_file():
    file = request.files.getlist("file")
    print(file)
    response="Whatever you wish to return"
    return response

REACT

export default class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
    };

    this.handleUploadImage = this.handleUploadImage.bind(this);
  }

  handleUploadImage(ev) {
    ev.preventDefault();

    const data = new FormData();
    data.append('file', this.uploadInput.files[0]);

    fetch('http://localhost:5000/upload', {
      method: 'POST',
      body: data,
    }).then((response) => {
      response.json().then((body) => {
      });
    });
  }

  render() {
    return (
      <form onSubmit={this.handleUploadImage}>
        <div>
          <input ref={(ref) => { this.uploadInput = ref; }} type="file" />
        </div>
        <br />
        <div>
          <button>Upload</button>
        </div>
      </form>
    );
  }
}

bas · Accepted Answer · 2021-07-26 07:21:25Z

1

You could set the multiple property on your file input so you can select multiple files:

<input
  ref={(ref) => {
    this.uploadInput = ref;
  }}
  type="file"
  multiple
/>

Then you could change your handleUploadImage function so it sends all files selected:

handleUploadImage(ev) {
  ev.preventDefault();

  const data = new FormData();
  for (let i = 0; i < this.uploadInput.files.length; i++) {
    data.append("file", this.uploadInput.files[i]);
  }

  fetch("http://localhost:5000/upload", {
    method: "POST",
    body: data,
  }).then((response) => {
    response.json().then((res) => {
      console.log(res);
    });
  });
}

answered Jul 26, 2021 at 7:21

bas

15.2k7 gold badges27 silver badges70 bronze badges

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

1 Comment

Braxton Hall Over a year ago

Also found out on the backend (Flask) I needed to receive as files = request.files.getlist('file')

Collectives™ on Stack Overflow

How can I upload multiple files in a React form to Flask API?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related