preventDefault() method not preventing page reload ReactJS

Question

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>

Can you show the part where `handleSubmit` is used? – Konrad Jul 03 '22 at 15:25 — Konrad, Jul 03 '22 at 15:25
@KonradLinkowski check the edited post. Thanks – Chaitanya Sondur Jul 03 '22 at 15:51 — Chaitanya Sondur, Jul 03 '22 at 15:51

score 2 · Answer 1 · answered Jul 03 '22 at 15:35

2

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).

answered Jul 03 '22 at 15:35

eminsh

233
1
2
9

What does "And it wouldn't work in production anyway." mean? – Chaitanya Sondur Jul 03 '22 at 16:01
It means when you build your app and deploy it on a production server (e.g. your hosting server), this method won't work. @ChaitanyaSondur – eminsh Jul 04 '22 at 09:03

score 0 · Answer 2 · edited Jul 03 '22 at 15:39

0

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
 }

edited Jul 03 '22 at 15:39

Jose CC

865
11
24

answered Jul 03 '22 at 15:33

Sante

339
3
10

It still reloads the page. – Chaitanya Sondur Jul 03 '22 at 15:58
I think the answer above is more likely your issue. As the comment in the link suggests you should not be uploading files directly to public folder. Use a separate folder for uploads instead. – Sante Jul 05 '22 at 13:32

preventDefault() method not preventing page reload ReactJS

2 Answers2