Add title with each image before saving in Angular 6

Question

I am using the following code to show preview of multiple image, Now I have to add title for each image then I have to save.

<input class="form-control" id="uploadimg" type="file" name="fileupload1" (change)="detectFiles($event,'gallery')" multiple>

<ng-container *ngFor="let url of urls;let n = index;">
  <div class="gallery-close">

    <div class="row-field">
      <h4>Title</h4>
      <input class="field-200" name="gal_title" size="25" />
    </div>
    <img [src]="url" name="url" class="rounded mb-3" width="100" height="100">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
</ng-container>

The array of URLs is filled in detectFiles:

export class AppComponent {

  urls = new Array<string>();

  detectFiles(event) {
    this.urls = [];
    let files = event.target.files;
    if (files) {
      for (let file of files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }
        reader.readAsDataURL(file);
      }
    }
  }
}

Answer 1

Create model that contain the title and the file

FileUploadModel.ts

export class FileUploadModel{
file: File;
title: string;
}

In you component use

export class AppComponent  {
  urls = new Array<string>();
  list: Array<FileUploadModel>=[];
  title:string;

  detectFiles(event) {
    this.urls = [];
    let files = event.target.files;
    if (files) {
      for (let file of files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }
        reader.readAsDataURL(file);
        //push the file list and title to list of model
        this.list.push({ file: file, title: '' });
      }
    }
  }
  save(){
    console.log(this.list)
  }
}

In html add ngModel to title

 <input [(ngModel)]="list[n].title" class="field-200" name="gal_title" size="25" />

I created in my github repository to upload file you can take a look

Here is stackblitz example