Form get reloaded on submit reactjs

Question

When I submit my form it gets reloaded, but when no file is selected, it doesn't get reload, just show me an error message 'No File Uploaded'. It only gets reloaded when I submit the file.

I already used the e.preventDefault() to prevent reloading but it doesn't work.

Component Code

import React, { Fragment, useState } from 'react'
import axios from 'axios'

const FileUpload = () => {
    const [file, setFile] = useState('');
    const [filename, setFilename] = useState('Choose File')
    const [uploadedFile, setUploadedFile] = useState({})

    const onChange = (e) => {
        setFile(e.target.files[0]);
        setFilename(e.target.files[0].name);
    }

    const onSubmit = async (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append('file', file);

        try {
            const res = await axios.post('/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            })

            const { fileName, filePath } = res.data;

            setUploadedFile({ fileName, filePath });
            console.log(uploadedFile);
        } catch (err) {
            if (err.response.status === 500) {
                console.log("There was a problem with the server.");
            } else {
                console.log(err.response.data.msg);
            }
        }
    }

    return (
        <Fragment>
            <form onSubmit={onSubmit}>
                <div className="mb-3">
                    <label htmlFor="formFile" className="form-label">{filename}</label>
                    <input className="form-control" type="file" id="formFile" onChange={onChange} />
                </div>
                {/* <button type="submit" value="Upload" className="btn btn-primary w-100" /> */}
                <button className="btn btn-primary w-100" type="submit">Upload</button>
            </form>
        </Fragment>
    )
}

export default FileUpload

Anyone can please help me with this.

Your problem is that your form does not have the action attribute, i.e. action="/link_to_some_page". This makes the form return to its default behavior, which is sending the data to its current URL, which is why you are experiencing this behavior. You either need to specify where the form data should be sent, or prevent the default behavior by applying the e.preventDefault()propagation to the form's submit. Alternatively, you can utilize AJAX and send the data asynchronously. — Martin
– Martin, Commented Apr 5, 2021 at 14:13
I already applied e.preventDefault() to the submit event and I post data to my API URL using axios — r121
– r121, Commented Apr 5, 2021 at 15:21

Ktoxcon · Accepted Answer · 2021-04-05 13:32:18Z

1

The problem with this code is in the async event handler, preventDefault needs to be called synchronously to have any effect at all.

You should call e.persist() before e.preventDefault()

answered Apr 5, 2021 at 13:32

Ktoxcon

4343 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

r121 Over a year ago

I did as you said, still it get reload on submit e.persist(); e.preventDefault(); const formData = new FormData(); formData.append('file', file);

Ktoxcon Over a year ago

@RishiPurwar Can you please upload it to condesandbox or something similar, that way it could be easier to debug.

ilkerkaran · Accepted Answer · 2021-04-05 13:21:45Z

0

Instead of using submit button and form onSubmit You can just use a normal button and bind the submit handler to onClick

<form>
                <div className="mb-3">
                    <label htmlFor="formFile" className="form-label">{filename}</label>
                    <input className="form-control" type="file" id="formFile" onChange={onChange} />
                </div>
                {/* <button type="button" onClick={onSubmit} value="Upload" className="btn btn-primary w-100" /> */}
                <button className="btn btn-primary w-100" type="submit">Upload</button>
            </form>

answered Apr 5, 2021 at 13:21

ilkerkaran

4,3923 gold badges31 silver badges45 bronze badges

3 Comments

r121 Over a year ago

Now, I did this but still get reloaded <button className="btn btn-primary w-100" onClick={onSubmit}>Upload</button>

ilkerkaran Over a year ago

you removed onSubmit from form element right?

r121 Over a year ago

Yes, I removed onSubmit event feom the form

Collectives™ on Stack Overflow

Form get reloaded on submit reactjs

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related