React onSubmit e.preventDefault() иногда не работает + Axios

Прямо сейчас я столкнулся с этой странной проблемой в React, где функция onSubmit с e.preventDefault() иногда избегает обновления страницы, а иногда нет.

Я создал два хука для отслеживания загруженных файлов и их индикаторов выполнения.

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

Функция onSubmit использует Axios для выполнения запроса к серверной части.

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
}

На всякий случай, функция addUpload практически не имеет отношения к источнику проблемы. Я забрал его, чтобы проверить, и все ведет себя так же.

Если кто-нибудь может помочь, я был бы признателен.

Редактировать:

Вот форма.

<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 — это третий хук, просто чтобы показать пользователю имя файла, который он только что выбрал.

Редактировать 2:

Проблемы появляются только тогда, когда размеры файлов превышают 100 МБ. Кроме того, как только проблема появляется, она начинает случаться с каждым файлом независимо от его размера.

Например, если я загружаю файл размером 7 МБ, страница не обновляется, если я затем пытаюсь загрузить файл размером 100 МБ, он начинает обновляться для каждого следующего файла, и все журналы консоли после сообщения axios больше никогда не отображаются.

Редактировать 3:

Поскольку я запускаю локальный сервер на Flask, я попытался отключить его от приложения React, чтобы посмотреть, что произойдет. Для небольших файлов запрос к бэкенду запрашивается только один раз, и срабатывает сигнализация внутри catch(err). Для больших файлов запрос запрашивается около четырех раз, и он никогда не достигает части захвата.

Отправить помощь