Issue with handling multiple input files in an *ngFor loop

Question

Issue with handling multiple input files in an *ngFor loop

I am facing difficulties in targeting the correct input within a *ngFor loop. When I include an image with the first input (Certificat dimmatriculation), it displays a placeholder image and a delete button to reset the input, but it appears under both divs.

I specifically want to target only the input where the actual image is added. Despite having ViewChild, I am unable to make it function as intended.

View image here

Here is the code snippet:

<div class="files">
     <div class="single-file" *ngFor="let file of files">
          <h5>{{file.title}}</h5>
          <input type="file" name="file" id="{{file.slug}}" class="inputfile" #fileInput (change)="addFile(fileInput.files[0])" />
          <label for="{{file.slug}}" *ngIf="!hasFile || isDeleted">
          <img class="d-none d-xl-inline-block" src="assets/images/addImg.png" alt="">
          Ajouter votre photo
          <img class="d-block d-xl-none" src="assets/images/addImg_big.png" alt="">
     </label>
     <div class="placeholder" *ngIf="hasFile && !isDeleted">
          <img [src]="imageUrl" />
      </div>
      <div class="deleteImg" *ngIf="hasFile && !isDeleted" (click)="deleteFile()">
          <div class="btn btn-outline"><img src="assets/images/delete-x-icon.png" alt="Supprimer">Supprimer</div>
          </div>
     </div>
</div>

Furthermore, in the .ts file:

I have declared all necessary variables


file: File;
imageUrl: string | ArrayBuffer = '../app/assets/images/imgAdded.png';
hasFile = false;
isDeleted = false;

@ViewChild('fileInput', { static: false }) myFileInput: ElementRef;

files: any = [{
    'title': 'Certificat dimmatriculation',
    'slug': 'immatriculation',
    'input': '#fileInput1'
}, {
    'title': 'Preuve dassurance',
    'slug': 'insurance',
    'input': '#fileInput2'
}];

addFile(file: File) {
    if (file) {
        this.hasFile = !this.hasFile;
        // this.fileName = file.name;
        this.file = file;

        const reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onload = event => {
            this.imageUrl = this.imageUrl;
            // this.imageUrl = reader.result;
        };
    }
}

deleteFile() {
    this.isDeleted = !this.isDeleted;
    this.myFileInput.nativeElement.value = '';
}

angular typescript input ngfor

Answer 1

Answer №1

Right now, you're facing an issue where you're trying to handle individual file properties using component-level properties. My suggestion would be to utilize file properties for storing uploaded image data instead. This way, all actions can be targeted towards the specific file instances.

To simplify things, I've adjusted your code examples for demonstration purposes and to illustrate the approach I've taken.

In my implementation, I use a property called imageUrl on each file to hold the URL of the uploaded image data. The presence of a value in this property indicates that an image has been uploaded, and it gets cleared when the image is deleted.

component.html

<div *ngFor="let file of files">
  <h5>{{file.title}}</h5>    
  <label *ngIf="!file.imageUrl">
    <input type="file" (change)="addFile(file, $event)" />
    Add your photo
  </label>  
  <ng-container *ngIf="file.imageUrl">
    <img [src]="file.imageUrl" />
    <button (click)="deleteFile(file)">Delete</button>
  </ng-container>
</div>

Now, all operations are carried out on the individual file objects and need to be passed into the event handlers. Alternatively, you could use an array index instead of the object reference.

There might also be some confusion between the file instances and the file uploaded from the input. If feasible, consider renaming your variables files and file to something else, reserving file solely for interactions with the file input.

component.ts

addFile(file, event) {
  const uploaded = event.target.files[0];
  if (!uploaded) {
    return;
  }

  const reader = new FileReader();
  reader.onload = () => {
    file.imageUrl = reader.result;
  };

  reader.readAsDataURL(uploaded);
}

deleteFile(file) {
  file.imageUrl = '';
}

DEMO: https://stackblitz.com/edit/angular-bcgwrq

Answer 2

Right now, you're facing an issue where you're trying to handle individual file properties using component-level properties. My suggestion would be to utilize file properties for storing uploaded image data instead. This way, all actions can be targeted towards the specific file instances.

To simplify things, I've adjusted your code examples for demonstration purposes and to illustrate the approach I've taken.

In my implementation, I use a property called imageUrl on each file to hold the URL of the uploaded image data. The presence of a value in this property indicates that an image has been uploaded, and it gets cleared when the image is deleted.

component.html

<div *ngFor="let file of files">
  <h5>{{file.title}}</h5>    
  <label *ngIf="!file.imageUrl">
    <input type="file" (change)="addFile(file, $event)" />
    Add your photo
  </label>  
  <ng-container *ngIf="file.imageUrl">
    <img [src]="file.imageUrl" />
    <button (click)="deleteFile(file)">Delete</button>
  </ng-container>
</div>

Now, all operations are carried out on the individual file objects and need to be passed into the event handlers. Alternatively, you could use an array index instead of the object reference.

There might also be some confusion between the file instances and the file uploaded from the input. If feasible, consider renaming your variables files and file to something else, reserving file solely for interactions with the file input.

component.ts

addFile(file, event) {
  const uploaded = event.target.files[0];
  if (!uploaded) {
    return;
  }

  const reader = new FileReader();
  reader.onload = () => {
    file.imageUrl = reader.result;
  };

  reader.readAsDataURL(uploaded);
}

deleteFile(file) {
  file.imageUrl = '';
}

DEMO: https://stackblitz.com/edit/angular-bcgwrq

Issue with handling multiple input files in an *ngFor loop

Answer №1

Similar questions

Jasmine-ts is encountering a problem related to a subpath within a package, causing

What kind of impact does the question mark at the conclusion of a function title make?

Oops! An issue occurred during the `ng build` command, indicating a ReferenceError with the message "Buffer is not defined

What steps are involved in creating a local unleash client for feature flagging?

Exploring the Functionality of the MatSlideToggleChange Event in the mat-slide-toggle Component

Getting exported members through Typescript Compiler API can be achieved by following these steps:

Steps for making a "confirm" button within a modal that includes a redirect URL

Using interpolation brackets in Angular2 for variables instead of dots

Why does mapping only give me the last item when I try to map onto an object?

An error in typescript involving a "const" assertion and a string array

What is the recommended approach for storing and retrieving images in the Angular 5 framework?

Retrieve specific data points within a dataset

A Promise is automatically returned by async functions

When working with Angular 2 and Typescript, a common error message that may be encountered is "TypeError

TS type defined by JS constants

Unable to fake a fetch request using the 'fetch-mock-jest 1.5.1' library

Exploring Angular 6 with Universal Karma for effective module testing

Leveraging Renderer in Angular 4

Having trouble with gsap.reverse() not functioning properly when using onMouseLeave event in React

Error: FaConfig is not provided in the NullInjector