Why does request.files not have the files that were sent? - reactjs

Question

I'm trying to upload a file to flask with fetch. What I do is onChange put the file in a useState hook and then onSubmit append it to FormData. After I send the file to my flask api with fetch. I put in a response to show me if the file is there or not and it keeps coming back as a blank dict.
Here is the react code.
import React, {useState} from 'react'
function App() {
const [file, setFile] = useState(null);
const fileInserted = (event) => setFile(event.target.value);
const handleSubmit = async (event) => {
event.preventDefault();
if (file) {
const data = new FormData();
data.append("file", file);
const resp = await fetch("/run", {
method: "POST",
body: data,
}).then(res => res.json())
.then(data => console.log(data.file))
.catch(error => console.error(error))
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="file"
onChange={fileInserted}
/>
<button type="submit" disabled={!file}>Submit</button>
</form>
</div>
);
}
export default App;
Here is the flask code.
#app.route("/run", methods=['GET', 'POST'])
def index():
if request.method == "POST":
if 'file' not in request.files:
return {"file": request.files}
file = request.files['file']
return {"file": file}
else:
return {"file": "this a get"}

Answer 1

The FormData you're populating gets recreated as an empty object on every render.
You also don't need to use an effect hook to run the fetch...
function App() {
const [file, setFile] = useState(null);
const fileInserted = (event) => setFile(event.target.value);
const handleSubmit = async (event) => {
if (file) {
const data = new FormData();
data.append("file", file);
const resp = await fetch("/run", {
method: "POST",
body: data,
});
// TODO: handle error/success
}
event.preventDefault();
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="file"
value={file}
onChange={fileInserted}
/>
<button type="submit" disabled={!file}>Submit</button>
</form>
</div>
);
}
export default App;