I am trying to upload files using multer or formidable. The files are uploaded properly and also stored in the public folder. I used create-react-app to start with React project.
The problem arises when I click on the submit button to upload the data. I used the fetch API for making the POST request. The page reloads after I click on the submit button, and anything I log on the console is refreshed as well. This was also answered here, but I want to know how do I prevent my page from reloading? Should I store my images outside the public folder?
Here is my handleSubmit() function that calls when form is submitted:-
const handleSubmit = async (e) => {
e.preventDefault();
let formData = new FormData();
formData.append("poster", document.getElementById('file').files[0]);
let res = await fetch("http://localhost:5000/api/post/exhibition", {
method: "POST",
body: formData
})
const json = await res.json()
console.log(json)
}
EDIT:- Handling onSubmit
<form onSubmit={handleSubmit} encType="multipart/form-data">
....
</form>
This is because when your upload is successful, webpack detects a new file and reloads the page.
from https://github.com/facebook/create-react-app/issues/2541#issuecomment-308750412
I don't think we'll do this as it seems like people generally don't use public folder for uploads. And it wouldn't work in production anyway.
I would recommend to use a separate server (which you need anyway) and separate folder for image uploads, and have the app load images from a different host/port (just like it would in production, e.g. from a CDN).
if you are using that function in onsubmit attribute of the form you need to return false from that function
const handleSubmit = async (e) => {
e.preventDefault();
let formData = new FormData();
formData.append("poster", document.getElementById('file').files[0]);
let res = await fetch("http://localhost:5000/api/post/exhibition", {
method: "POST",
body: formData
})
const json = await res.json()
console.log(json)
return false
}