Ndtyjky

I am having issues in image upload. There are two image upload section, in first upload it works fine. but when I am uploading in second upload image only changes in first section. Below are the code details:

<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]);

}

}

In both the uploads image only uploads on first section but both the div's and even functions are different.

The file input in the first section:

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

has the same id as the file input in the second section:

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

Change one of them so that they are each unique.

Tried creating stackblitz with same code as above and it is working as expected. only respective input filed change events are getting trigged.

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