uploading multiple images in angular with preview including names of images

Question

with uploading images in angular 8, I need to preview the images with name of each image under it, preview done successfully and the name under image appeared but of other image not of the same one, so names are disordered with sequential of images.

any help please to show each image with its name below it.

HTML:

     <input class="btn btn-secondary" type="file" name="image" (change)="fileProgress($event)"
                    multiple="multiple" />



            <div class=" row" *ngIf="show_preview">
              <div class=" col-md-2 pr-md-1" *ngFor=" let j of previewUrl">
                <div class="image-preview mb-3">

                  <img [src]="j" height="100" />

                </div>
                <div *ngFor="let i of image">
                  <h6 style="text-align: center">{{ i.name }}</h6>
                </div>



TS:

fileProgress(fileInput: any) {
    this.fileData = new Array<File>();
    this.number_list = new Array<number>();
    this.previewUrl = new Array<string>();
    this.file_names = new Array<string>();
    this.image = new Array<Image>();
    console.log("after formating", this.previewUrl)//to check
    for (this.i = 0; this.i < fileInput.target.files.length; this.i++) {

     this.preview(fileInput.target.files[this.i]);

    }
    this.show_preview = true;
  }

   preview(file: any) {
    this._img = new Image();
    this._img.name = file.name;
    this.image.push(this._img);
    // Show preview 
    //this.image = new Image();
    var reader = new FileReader();
    reader.readAsDataURL(file);


  reader.onload = (_event: any) => {
    this.previewUrl.push(_event.target.result)

  }
  }

Answer 1

This code is Working

HTML:

   <input class="btn btn-secondary" type="file" name="image" (change)="fileProgress($event)" multiple="multiple" />

    <div class=" row" *ngIf="show_preview">
        <div class=" col-md-2 pr-md-1">
            <div class="image-preview mb-3" *ngFor=" let j of previewUrl">
                <img [src]="j.url" height="100" />
                <div >
                    <h6 style="text-align: center">{{j.imageName }}</h6>
                </div>
            </div>
        </div>
    </div>

TS:

fileProgress(fileInput: any) {
    this.fileData = new Array<File>();
    this.number_list = new Array<number>();
    this.previewUrl = new Array<string>();
    this.file_names = new Array<string>();
    this.image = new Array<typeof Image>();
    console.log("after formating", this.previewUrl)//to check
    for (this.i = 0; this.i < fileInput.target.files.length; this.i++) {
      this.preview(fileInput.target.files[this.i]);
    }
    this.show_preview = true;
  }

  preview(file: any) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (_event: any) => {
      this._img = new Image();
      this._img.name = file.name;
      this.image.push(this._img);
      const obj = {
        url: _event.target.result,
        imageName: this._img.name
      }
      this.previewUrl.push(obj);
      console.log('this.previewUrl', this.previewUrl);
    }
  }