Error sending PDF from ReactJS to Flask app - reactjs

Question

I'm trying to send a PDF from a frontend react app to a backend flask app using fetch. The idea is a user uploads a PDF on the frontend and sends to a backend that parses it and returns an edited version in JSON format.
Frontend:
function App() {
const [file, setFile] = useState(null);
const [data, setData] = useState();
const upload = (event) => {
setFile(event.target.files[0]);
};
const submit = () => {
const formData = new FormData();
formData.append("file", file);
fetch("http://localhost:5000/parser", {
method: "POST",
mode: "no-cors",
body: formData,
})
.then((res) => res.json())
.then((res) => {
setData(res);
console.log(res);
});
};
useEffect(() => {
if (file) {
submit();
}
}, [file]);
return (
<div className="App">
{" "}
<input type="file" accept="application/pdf" onChange={upload} />
<input type="submit" onClick={submit} />
</div>
);
}
export default App;
Backend:
app = Flask(__name__)
CORS(app)
#app.route("/parser", methods=['GET', 'POST'])
def parse():
file = request.files['file']
file.save(secure_filename("secure.pdf"))
fp = open("secure.pdf", 'rb')
data = convert(fp, 0)
response = make_response(data)
response.headers["Content-Type"] = "application/json"
response.headers["Access-Control-Allow-Origin"] = "http://localhost:5173"
return response
if __name__ == "__main__":
# for production change debug to False
app.run(debug=True)
The flask server is running with this error:
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'file'
I'm not sure what I'm doing wrong here. As of now when I hit submit on the front end to send the PDF, the backend saves it to the local repo. So the PDF is getting through but for some reason there's an issue on the way back it seems.
Is there a better way to do this? To send a PDF and return a JSON? The python function I have works when I run it with a local PDF in the dir, but I need these two apps to work dynamically with each other.
The error makes even less sense to me because I'm able to save the file to the local repo, but am still getting an error seemingly on that line: file = request.files['file']

Answer 1

You cannot send the pdf as a json file until it get transformed. You should change it to b64 kind of transformation as temporary file(encoding and decoding) like this.