Re-uploading a file with AJAX after it was changed causes net::ERR_UPLOAD_FILE_CHANGED in Chrome

Question

I have a simple HTML form that sends an selected file via AJAX to an API endpoint.

If I do the following steps:

1. Press the Upload button and make an POST r

Answer 1

No, if the user has changed file it already another file so you can't (should not) get access to this file without user explicit user action otherwise it would be a security issue.

You can save the file in the memory when user uploads it.

document.getElementById('fileInput').addEventListener('change', function() {
   saveFileConentInMemory(this.files[0].arrayBuffer());
});

And when the user press the "Send" button just get this content from memory and send it

button.addEventListener('click', () => {
   const file = getFileContentFromMemeory();
   send(file);
})

Yes, you can't be sure that you send the latest version of the file but you should be sure that you send the content which was uploaded.

Also, you should aware of memory consumption and asynchronous API of reading file (so you still can get this error about changed content even when you write it in memory)