Как проверить наличие изменений в файле после его выбора в ?

Question

Чтобы загрузить I файл в Angular, я делаю это:

<input type="file" (change)="onFileSelected($event.target.files)"/> 
<button (click)="onStartUpload()"</button>

  public onFileSelected(files: File[]) {
    this.file = files[0];
  }

  public onStartUpload() {
    // Upload the file
  }

Это прекрасно работает. Но когда я выбираю файл, , затем изменяю его содержимое и сохраняю его , а затем загружаю его, мой внутренний ответ выглядит так:

Неожиданный конец потока, контент может иметь уже был прочитан другим компонентом.

Это происходит только с Firefox. Он отлично работает в Chrome.

Обновление: с последним обновлением Chrome он больше не отправляет запрос.

Как проверить, есть ли в файле был изменен после того, как я выбрал его в браузере?

Answer 1

Если вы используете экземпляр объекта FileReader, вы можете воспользоваться тем, что он не будет загружать файл, который был изменен после выбора. Чтобы успешно загрузить файл, он должен остаться таким же, каким он был при выборе.

Вот небольшой пример, который продемонстрирует. Проверено на текущей итерации Chrome x64 в windows.

window.addEventListener('load', onLoaded, false);

function onLoaded(evt) {
  document.querySelector('button').addEventListener('click', onBtnClicked, false);
}

function onBtnClicked(evt) {
  let fileToUpload = document.querySelector('input').files[0];

  const fileReader = new FileReader();
  fileReader.onload = fileLoaded;
  fileReader.onerror = fileError;
  fileReader.readAsText(fileToUpload);
  //	fileReader.readAsArrayBuffer(fileToUpload);
  //	fileReader.readAsBinaryString(fileToUpload);
  //	fileReader.readAsDataURL(fileToUpload);

  function fileLoaded(evt) {
    let fileToUpload = evt.target.result;
  }

  function fileError(evt) {
    console.log('Error loading file');
    console.log(evt.target.error);
  }
}

<input type='file' /><br>
<button>Go</button>