React onClick with axios is refresh after sent

Question

in onClick, I call the function and use preventDefault() but the web page is refreshed. I'm not sure if it about's axios because when it done to fetching the web page is refreshes immediately.

function submit(event){
    event.preventDefault();
    
    const formData = new FormData();
    formData.append("name", name);

    axios({
        method: "POST",
        url: "http://localhost:5000/insert-data",
        headers: {"Content-Type": "multipart/form-data"},
        data: formData,
        onUploadProgress: (e)=>{
            if(e.lengthComputable){
                console.log(((e.loaded * 100 / e.total)+"").split(".")[0])
            }
        }
    }).then(res=>{
        console.log(res.data);
    })

form

<input type="text" placeholder="name" onChange={e=>setName(e.target.value)} /> <br />
<input type="file" onChange={e=>setVideo(e.target.files[0])} /> <br />
<button type="button" onClick={submit}>Insert Data</button>

No, At first I thought it was form tag but when I deleted it It still has the same problem. — Loga Thrim, May 16 '21 at 18:53
One thing to note is that if nothing ends up working with the form, you could always just take out the form wrapper. It looks like all of your input data are tracked in React's state. You could use that data directly inside `submit` — Andrew, May 16 '21 at 19:04

Arihant Jain · Answer 1 · 2021-05-16T19:37:36.127

const submit=(event)=>{
    event.preventDefault();
    
    const formData = new FormData();
    formData.append("name", name);

    axios({
        method: "POST",
        url: "http://localhost:5000/insert-data",
        headers: {"Content-Type": "multipart/form-data"},
        data: formData,
        onUploadProgress: (e)=>{
            if(e.lengthComputable){
                console.log(((e.loaded * 100 / e.total)+"").split(".")[0])
            }
        }
    }).then(res=>{
        console.log(res.data);
    })

Try if adding a form tag solves this issue

<form onSubmit={submit}>
    <input type="text" placeholder="name" onChange={e=>setName(e.target.value)} /> <br />
    <input type="file" onChange={e=>setVideo(e.target.files[0])} /> <br />
    <button type="submit">Insert Data</button>
</form>

you dont need to put `await` before axios calling since OP is using `then` to resolve the promise — kennysliding, May 16 '21 at 19:35

score 0 · Answer 2 · answered May 16 '21 at 19:25

I have an answer to my question, It because when I submit files to api the filename is already exists in my upload folder, so I solved it with a unique filename.

But I don't know why because response from api is same, it not error

this is my api (Nodejs)

req.files.video.mv(path.join(__dirname + "/../public/videos/" + req.files.video.name), err=>{
        if(err) throw err;

        dbcon.collection("user").update({_id: ObjectId(id)}, {$push: {level: {
            name, video: req.files.video.name
        }}}, (err, doc)=>{
            if(err) throw err;
            res.json({status: "success"})
        })
    })

React onClick with axios is refresh after sent

2 Answers2