title: How to check for changes in file after it has been selected in a <input type="file">?
body: <p>To upload I file in Angular, I am doing this:</p>
  
  <pre><code>&lt;input type="file" (change)="onFileSelected($event.target.files)"/&gt; 
  &lt;button (click)="onStartUpload()"&lt;/button&gt;
  
    public onFileSelected(files: File[]) {
      this.file = files[0];
    }
  
    public onStartUpload() {
      // Upload the file
    }
  </code></pre>
  
  <p>This works perfectly. But when I select a file, <strong>then change its content and save it</strong>, and then upload it, my backend response is this:</p>
  
  <blockquote>
    <p>Unexpected end of Stream, the content may have already been read by
    another component.</p>
  </blockquote>
  
  <p><strike>This only happens with Firefox. It works fine in Chrome.</strike></p>
  
  <p>Update: With Chrome's latest update, it does not send the request
  anymore.</p>
  
  <p>How can I check if the file has been changed after I selected it in the browser? </p>