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

I managed to get a more descriptive error using the javascript File Reader. After the the file is changed and the button is pressed for the second time, the FileReader throws a somewhat more descriptive message:

DOMException: The requested file could not be read, typically due to permission problems that have occurred after a reference to a file was acquired.

At least this is an error that can be caught and displayed to the user, so they are aware that they need to re-select the file.

Here is the snippet:

It seems that there is no way around this at the moment (June 2020). There is an open bug on Chromium:

https://bugs.chromium.org/p/chromium/issues/detail?id=1084880&q=ERR_UPLOAD_FILE_CHANGED&can=2