Search code examples
reactjsaxiospage-refreshonsubmit

React onSubmit e.preventDefault() not working sometimes + Axios

Right now I'm facing this strange problem in React where the onSubmit function with e.preventDefault() does avoid refreshing the page sometimes, and sometimes it doesn't.

I've created two hooks to keep track of the uploaded files and their progress bars.

const [ uploadedFiles, setUploadedFiles ] = useState([]);
const [ uploadPercentages, setUploadPercentages ] = useState([]);

The onSubmit function uses Axios to make a request to the backend.

const onSubmit = async e => {
        e.preventDefault();

        if(!!file) {
            // Show file box on screen
            let index = addUpload(file);

            const formData = new FormData();
            formData.append("file", file);

            try {
                await axios.post("/upload_video", formData, {
                    onUploadProgress: progressEvent => {
                        const { loaded, total } = progressEvent;
                        let progress = uploadPercentages.concat(0)
                        progress[index] = Math.round((loaded * 100) / total)

                        setUploadPercentages(progress);
                    }
                })
            } catch(err) {
                // Handlers
            }
        }
        return false // trying something different to avoid refresh
}

Just in case, the addUpload function has shown little to no relation with the source of the problem. I took it away to test it and things behave the same way.

If anyone can help I would appreciate it.

Edit:

Here is the form.

<form className="choose-file" onSubmit={onSubmit}> 
            
     <div className="file-container">
         { file ?
             <p> { file.name } </p>
             :
             <label className="file-label" htmlFor="customFile">
                 <input type="file" className="file-input" id="customFile" onChange={ onChange }/>
                 <p><i className="fas fa-cloud-upload-alt"></i></p>
                 <p>Click here to select file</p>
             </label>   
          }
     </div>

     <div className="file-options">
          <input type="submit" value="Upload" className="file-input" id="customFile"/>
          <button type="button" onClick={ removeFile }>Delete</button>
     </div>

</form>

"file" is a third hook just to show the user the name of the file they just selected.

Edit 2:

The problems seems to appear only when file sizes are greater than 100MB. Besides, once the problem shows up, it starts to happen to every single file no matter its size.

For instance if I upload a 7MB file, page does not refresh, if I then try a 100MB file it starts refreshing for every upcoming file and all console logs after the axios post are never seen again.

Edit 3:

Since I'm running a local backend on Flask, I tried disconnecting it from the React app to see what happens. For small files the request to the backend is only asked once and the alarm inside the catch(err) triggers. For big files the request is asked around four times and it never reaches the catch part.

Send help

Solution

  • At the end, the problem turned out to be something as simple as saving the files in the React's public folder.

    My guess is that this caused the whole project to refresh every time a change is detected inside this folder. For small objects the time it takes almost zero, but for big files it takes a while, causing the components to refresh as well.