Загрузка изображения: Angular 6

Question

У меня проблемы с загрузкой изображений. Есть две секции загрузки изображений, при первой загрузке все работает нормально. но когда я загружаю во второй загрузке изображение меняется только в первом разделе Ниже приведены детали кода:

<div class="upload">
  <div class="center_image">
    <div class="image-upload">
      <label for="file-input">
        <img *ngIf="!url1==true" src="/assets/images/upload.png">
        <img [src]="url1" height="60">
      </label>

      <input id="file-input" type="file" (change)="readUrl($event)" />
    </div>
    <h6 *ngIf="!url1==true" class="font_u">Upload Front</h6>
    <br>
    <div class="li_ol">
      <p>The following details must be clearly visible :</p>
      <ol>
        <li>Name</li>
        <li>Date of Birth
        </li>
        <li>Gender</li>
        <li> Aadhaar number
        </li>
        <li>Photograph</li>
      </ol>
    </div>
  </div>
</div>
<div class="upload">
  <div class="center_image">
    <div class="image-upload">
      <label for="file-input">
        <img *ngIf="!url2==true" src="/assets/images/upload.png">
        <img [src]="url2" height="60">
      </label>

      <input id="file-input" type="file" (change)="onSelectFileBack($event)" />
    </div>
    <h6 *ngIf="!url2==true" class="font_u">Upload Back</h6>
    <br>
    <div class="li_ol">
      <p>The following details must be clearly visible :</p>
      <ol>
        <li>Address</li>
        <li> Aadhaar number</li>
      </ol>
    </div>
  </div>
</div> 

Javascript:

readUrl(event: any) {
  alert(event);
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = (event: any) => {
      this.url1 = event.target.result;
    }

    reader.readAsDataURL(event.target.files[0]);
  }
}

onSelectFileBack(event: any) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = (event: any) => {
      this.url2 = event.target.result;
    }

    reader.readAsDataURL(event.target.files[0]);
  }
}

При обеих загрузках изображение загружается только в первом разделе, но функции div и даже отличаются.

Answer 1

Попытка создания stackblitz с тем же кодом, что и выше, и он работает как положено. запускаются только соответствующие входные события изменений.

https://stackblitz.com/edit/angular-hmuzzd?file=src%2Fapp%2Fapp.component.ts

Answer 2

Файл ввода в первом разделе:

   <input id="file-input" type="file" (change)="readUrl($event)" />

имеет тот же id, что и файл, введенный во втором разделе:

   <input id="file-input" type="file" (change)="onSelectFileBack($event)" />

Измените один из них, чтобы каждый из них был уникальным.