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>
);
}
}
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);
});
});
}