title: Re-uploading a file with AJAX after it was changed causes net::ERR_UPLOAD_FILE_CHANGED in Chrome
body: <p>I have a simple HTML form that sends an selected file via AJAX to an API endpoint.</p>
  <p>If I do the following steps:</p>
  <ol>
  <li>Press the Upload button and make an POST request to upload the file</li>
  <li>Change the selected file on the filesystem (in a text editor), without picking it again in the file picker.</li>
  <li>Press the Upload button again, and make as second POST request</li>
  </ol>
  <p>Chrome will fail the second request with an error: <code>net::ERR_UPLOAD_FILE_CHANGED</code>. Note that if you change the file before the initial upload, the file will be uploaded without a problem. The error happens only on the second upload, when you change the file after an initial successful upload. I am testing this with CSV files, and changing them in a text editor.</p>
  <p>There does not seem to be a way to isolate that error.</p>
  <p>Is there any way around this?</p>
  <p>If not, is it possible to catch this specific error, and display a meaningful message to the user. The error that Fetch returns in the promise has no specific info about this. The only place where I see the <code>ERR_UPLOAD_FILE_CHANGED</code> is in the browser dev console.</p>
  <p>I am pretty sure that there was not any problem with this about a year ago (early 2019), as the possibility to re-upload a changed file, played in nicely in our UI flow. Now we need to force the user to pick the file again. So my assumption that this was introduced with a recent chrome update.</p>
  <p>Here is a simplified snippet of the code:</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
          &lt;script type='text/javascript'&gt;
          document.addEventListener(&quot;DOMContentLoaded&quot;, function(){
  
                  const button = document.querySelector('#btnSubmit');
  
                  button.addEventListener('click', () =&gt; {
                          const form = new FormData(document.querySelector('#theForm'));
                          const url = '/my-api'
                          const request = new Request(url, {
                                  method: 'POST',
                                  body: form
                          });
          
                          fetch(request).then(function() {
                                  console.log(&quot;ok&quot;);
                          }).catch(function(err) {
                                  console.log(err);
                          });
                  });
          });
          &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
          &lt;form enctype=&quot;multipart/form-data&quot; action=&quot;&quot; method=&quot;post&quot; id='theForm'&gt;
                  &lt;input type=&quot;file&quot; name=&quot;csvfile&quot; id=&quot;csvfile&quot; value=&quot;&quot; /&gt;&lt;/td&gt;
                  &lt;input type=&quot;button&quot; name=&quot;uploadCSV&quot; value=&quot;Upload&quot; id='btnSubmit'/&gt;
          &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>EDIT</strong>: The bug is marked as WontFix on bugs.chromium.org: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1086707#c7" rel="noreferrer">https://bugs.chromium.org/p/chromium/issues/detail?id=1086707#c7</a></p>