Choosing files from only one row in a table angular

Issue

I have a table in which a single column consists of the option of choosing files. I have done that but my problem is that when I choose files in a particular row the files get choose in all the rows. Even if I delete it gets deleted in all rows. I want it to be selected or deleted in only one row.

STACKBLITZ

Solution

Here are some modification that will maintain the list of files with the actual record (row).

First modify the listes data model:

{
      name: "A",
      qty: 6,
      value: 10,
      files: [] // added files array here
    },

Next, modify the getFileDetails code. You need the index and the target. Then, find the list by index and push the target.files onto that listes object (row):

  getFileDetails (index, e) {
    //console.log (e.target.files);
    for (var i = 0; i < e.target.files.length; i++) { 
      this.listes[index].files.push(e.target.files[i]);
    }
    console.log(this.myFiles)
  }

Change the delete method to delete the selected file from the selected index. In this case we need two indexes, one for the list and one for the files. These are created inside the HTML (below):

  deleteRow(listIndex: number, fileIndex: number) {
    this.listes[listIndex].files.splice(fileIndex,1);
  }

Finally the changes necessary to the html are minimal, but relate to the indexes I mentioned above:

                <tbody>
                    <tr *ngFor="let list of listes; index as listIndex">
                        <td>{{listIndex+1}}</td>
                        <td>{{list.name}}</td>
                        <td>{{list.qty}}</td>
                        <td>{{list.value}}</td>
                        <div style="overflow: auto;">
                            <td>
                                <div>
                                    <ng-container>
                                        <input type="file"  multiple
            (change)="getFileDetails(listIndex, $event)">
                                    </ng-container>
                                </div>
                                <div *ngFor="let file of list.files; index as fileIndex">
                                    <div>* {{file.name}}</div>
                                    <button type="button" (click)="deleteRow(listIndex, fileIndex)" class="btn btn-primary">X</button>
                                </div>
                            </td>
                        </div>
                    </tr>
                </tbody>

OP asked about clearing the file input after files are deleted. The following change accomplishes that:

    <input #fileInput type="file" multiple (change)="getFileDetails(listIndex, $event)">
    </ng-container>
    </div>
    <div *ngFor="let file of list.files; index as fileIndex">
      <div>* {{file.name}}</div>
      <button type="button" (click)="deleteRow(listIndex, fileIndex); fileInput.value = ''" class="btn btn-primary">X</button>

The working blitz can be found here: https://stackblitz.com/edit/angular-ivy-gepzrz?file=src%2Fapp%2Fapp.component.html

Answered By – Randy Casburn

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.