Select numerous files and conveniently delete them using the angular delete button

Question

Select numerous files and conveniently delete them using the angular delete button

Background: In one of my tables, there is a column where users can either choose or upload files as input. I have implemented a feature that allows users to select multiple files at once.

Issue at Hand: What I am trying to achieve is to have an 'x' symbol, a close button, or a delete option next to each filename after selecting multiple files (let's say 3 as an example). This way, users can easily unselect or delete individual files as needed. I have included a visual example for clarity.

Additionally, I am seeking advice on how to remove specific list values by index.

Sample Image for Reference

If my explanation is unclear, please leave a comment below.

HTML Code Snippet:

 <td>
    <ng-container>
     <input style="width:240%" type="file" id="file" multiple
         (change)="getFile($event)" >
      </ng-container>
</td>

Typescript Code Snippet:

myFiles:string [] = [];
getFile (e) {
for (var i = 0; i < e.target.files.length; i++) { 
  this.myFiles.push(e.target.files[i]);
}}

I have included a link to my Stackblitz project for further assistance:

Stackblitz: https://stackblitz.com/edit/angular-ivy-4vnwed?file=src%2Fapp%2Fapp.component.ts

javascript jquery angular typescript angular5

Answer 1

Answer №1

Don't forget to include a "let" before declaring the f variable in your HTML code.

<li *ngFor="let f of files">

Instead of using map, try using filter in your app.components.ts file. The code this.files.map() is not correctly filtering out elements. Print the output to the console for debugging purposes.

  removeFile(i: number) {
   this.files = this.files.filter(x => x.index != i);
  }

Answer 2

Don't forget to include a "let" before declaring the f variable in your HTML code.

<li *ngFor="let f of files">

Instead of using map, try using filter in your app.components.ts file. The code this.files.map() is not correctly filtering out elements. Print the output to the console for debugging purposes.

  removeFile(i: number) {
   this.files = this.files.filter(x => x.index != i);
  }

Select numerous files and conveniently delete them using the angular delete button

Answer №1

Similar questions

Is there a way for senders to also view their own messages using socket.io?

I am facing an issue with my react-app where it compiles successfully without any errors, but it is not rendering any elements

Issue with nested directive not triggering upon page load

Is there a more efficient solution for incorporating undefined and null into a type apart from developing a custom generic function?

Is there a way to retrieve MongoDB count results in Node.js using a callback function?

How to Assign a Specific ID to the Body Tag in Wordpress Using functions.php

Issue with Google Finance JSON response not functioning as expected in Chrome and Firefox browsers, yet appears to be working properly in

What is the best way to send a Rails AJAX form upon clicking?

Looking to create an Ajax Control Toolkit AutoCompleteExtender with results that are "similar"?

Transmit and receive information between Javascript and Node.js through Express framework

Unveil Secret Divs with a Click

The resizing issue persists with Angularjs charts

Having trouble with installing npm package from gitlab registry

Attempting to transfer various files using a text box, yet upon submission, the form does not contain any input for the name or date text

What approach can be taken to establish a dependency between an AngularJS controller and a value that is retrieved through ajax and loaded onto the root

What is the process for extracting components from a JSON file using an observable in Angular?

Utilizing jQuery to manage asynchronous tasks, such as executing AJAX requests, handling promises, and using deferred

What is the significance of the underscore prefix in package.json properties?

Keep some table columns locked in place on your webpage while others are located off-screen, requiring a scroll to access

The barcode is not displaying when using javascript:window.print() to print