Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

325
Views
Cómo mostrar la lista de archivos cargados y cómo eliminarlos en angular

Estoy trabajando en el componente de carga de archivos y quiero mostrar la lista de nombres de archivos y debería ser extraíble. ¿Cómo obtener la lista de nombres de archivo en una matriz?

 async onUpload(event:Event){ const filesToUpload=(event.target as HTMLInput Element).files; // here I can able to get the //file names. but don't know how to set that in array }

y cada archivo debe tener el símbolo x (para eliminar el archivo). Después de cargar el archivo, podemos eliminarlo si no lo queremos usando el símbolo x. ¿Cómo quitar eso?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Paso 1) Realice una llamada API a su backend para obtener una colección de archivos ya disponibles, devuelva los datos relevantes según sea necesario (por ejemplo, nombre de archivo, URL donde está almacenado para que pueda descargarlo, cualquier otra cosa que sea necesaria).

Paso 2) Agregue un poco de escucha de clics a cualquier elemento en el que el usuario haga clic (ya sea un div o un botón) para cargar dicho archivo.

Ej: (en este ejemplo, estoy usando la Tabla de material angular, pero el concepto es el mismo si solo usa un ngFor)

 <mat-table #table [dataSource]="tableData" id="reportsRequestedTable"> <button type="button" mat-icon-button (click)="delete(row)"><mat-icon class="gray">clear</mat-icon></button>

En su método de delete , establecerá su parámetro de la siguiente manera:

 delete(row: YourFileType) { //do whatever it is you need to do to delete the file from both front end and backend

Paso 3) En lo que respecta a la carga; este documento tiene una buena explicación de cómo hacerlo. https://blog.angular-university.io/angular-file-upload/ a la firma de su método de carga le gustaría:

 async onUpload(event: Change)
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!