Как получить 2 файла из 2 разных HTML входов в FileReader в Angular 8?

Question

В моем текущем проекте 2 JSON файлы должны быть собраны вместе. Чтобы иметь возможность использовать все файлы, их можно интегрировать через входы 2 HTML. Я использовал JS FileReader для редактирования двух файлов.

Есть ли способ сделать оба файла доступными одновременно?

HTML:

<input (change)="onFileChange($event)" [(ngModel)]="json1" type="file">
<input (change)="onFileChange($event)" [(ngModel)]="json2" type="file">

Компонент:

public onFileChange(event) {
    var one = this.json1;
    var two = this.json2;
    one = event.target.files;
    two = event.target.files;
    if (one) {
      var i = 0, f; f = one[i]; i++;
      console.log(i);
    } else {
      var i = 0, f2; f2 = two[i]; i++;
      console.log(i);
    }
    var fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent) {
        var showJSON = fileLoadedEvent.target.result;
    };
    fileReader.readAsText(f, "UTF-8");
    console.log(f);
  };

Моя текущая идея - дать каждому файлу номер, с которым вы затем сможете работать, только пока это не сработало.

Answer 1

Добавить multiple атрибут к элементу ввода

<input type="file" multiple (change)="onFileChange(myInput)" #myInput>

и получить доступ с помощью

onFileChange(myInput) {
  console.log(myInput.files) //You will get array of files here loop through each 
}