Subida de archivos en Angular: una guía completa
La subida de archivos es una función crucial en muchas aplicaciones web, porque permite a los usuarios compartir documentos, imágenes y otros medios. En esta guía completa, exploramos la funcionalidad robusta de subida de archivos en aplicaciones Angular, desde implementaciones básicas hasta técnicas avanzadas y buenas prácticas. El ejemplo básico usa la configuración con NgModule de Angular 14–17. La integración opcional con Uppy tiene requisitos de versión aparte, descritos más abajo.
Configuración necesaria
En una aplicación Angular 17 existente creada con ng new upload-demo --no-standalone, registra el
componente de abajo y HttpClientModule en app.module.ts. Añade <app-file-upload></app-file-upload>
a app.component.html:
import { HttpClientModule } from '@angular/common/http'
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppComponent } from './app.component'
import { FileUploadComponent } from './file-upload/file-upload.component'
@NgModule({
imports: [BrowserModule, HttpClientModule],
declarations: [AppComponent, FileUploadComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Para una aplicación standalone más reciente, sigue la guía oficial de configuración de HTTP de Angular.
El progreso de subida necesita el backend XHR; el backend Fetch de Angular no emite eventos de
progreso de subida. El endpoint /upload de abajo debe aceptar un campo multipart llamado file
y devolver una respuesta HTTP correcta solo después de aceptar el archivo. Implementa ese endpoint
del servidor por separado.
Comprender los fundamentos de la subida de archivos en Angular
Antes de entrar en los detalles de implementación, es esencial comprender los conceptos básicos de la subida de archivos en Angular.
La API de archivos de HTML5
Angular aprovecha la API de archivos de HTML5, que ofrece una forma estandarizada de interactuar con archivos en aplicaciones web. Esta API nos permite acceder a la información y al contenido de los archivos directamente en el navegador.
El módulo de formularios de Angular
El evento change del input de archivo nativo proporciona el File seleccionado. Este ejemplo no necesita
FormsModule; añádelo cuando el formulario que lo rodea use directivas como ngModel.
Implementar la subida básica de archivos
Empecemos con una implementación sencilla de subida de archivos en Angular.
Configurar la plantilla HTML
Primero, crea una plantilla HTML básica con un input de archivo y un botón para iniciar la subida:
<div class="upload-container">
<input type="file" [disabled]="isUploading" (change)="onFileSelected($event)" accept=".jpg,.jpeg,.png,.pdf" />
<button [disabled]="!selectedFile || isUploading" (click)="onUpload()">Upload</button>
<div *ngIf="uploadProgress > 0" class="progress">Upload Progress: {{uploadProgress}}%</div>
</div>
Gestionar la selección de archivos en el componente
Guarda este componente como file-upload/file-upload.component.ts y la plantilla anterior como
file-upload/file-upload.component.html. Las comprobaciones de tipo de archivo mejoran la
información al seleccionar; el servidor debe validar de forma independiente el contenido y el tamaño
reales del archivo.
import { HttpClient, HttpEventType } from '@angular/common/http'
import { Component } from '@angular/core'
@Component({
selector: 'app-file-upload',
standalone: false,
templateUrl: './file-upload.component.html',
})
export class FileUploadComponent {
selectedFile: File | null = null
uploadProgress = 0
isUploading = false
private allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']
constructor(private http: HttpClient) {}
onFileSelected(event: Event): void {
const input = event.target
if (!(input instanceof HTMLInputElement)) return
const file = input.files?.[0]
this.uploadProgress = 0
if (file && this.allowedTypes.includes(file.type)) {
this.selectedFile = file
} else {
alert('Please select a valid file type (JPEG, PNG, or PDF)')
input.value = ''
this.selectedFile = null
}
}
onUpload(): void {
if (this.selectedFile && !this.isUploading) {
this.isUploading = true
this.uploadProgress = 0
const formData = new FormData()
formData.append('file', this.selectedFile)
this.http
.post('/upload', formData, {
reportProgress: true,
observe: 'events',
})
.subscribe({
next: (event) => {
if (event.type === HttpEventType.UploadProgress) {
this.uploadProgress = event.total != null && event.total > 0
? Math.round(100 * event.loaded / event.total)
: 0
} else if (event.type === HttpEventType.Response) {
console.log('Upload complete')
this.selectedFile = null
this.isUploading = false
this.uploadProgress = 100
}
},
error: () => {
console.error('Upload failed; please try again later.')
this.uploadProgress = 0
this.isUploading = false
},
})
}
}
}
Buenas prácticas para la subida de archivos en Angular
Para garantizar una experiencia de subida de archivos fluida y segura, ten en cuenta las siguientes buenas prácticas:
- Valida los tipos y tamaños de archivo: implementa comprobaciones del lado del cliente para evitar la subida de tipos de archivo no compatibles o de archivos que superen los límites de tamaño.
- Usa subidas por fragmentos: para archivos más grandes, implementa subidas por fragmentos para mejorar el rendimiento y la fiabilidad.
- Implementa lógica de reintentos: añade mecanismos de reintento para las subidas fallidas y así gestionar con elegancia los problemas de red.
- Protege tus endpoints: asegúrate de que los endpoints de subida del lado del servidor validen adecuadamente los archivos entrantes.
- Optimiza el rendimiento: usa técnicas como la compresión y la carga diferida para mejorar el rendimiento de la aplicación.
- Ofrece información clara: mantén a los usuarios informados sobre el estado de la subida con indicadores de progreso y mensajes de error claros.
- Gestiona la subida de varios archivos: habilita la funcionalidad para manejar la selección de varios archivos y las subidas simultáneas.
Usar Uppy con Angular
Para una solución avanzada de subida de archivos, sigue la guía oficial de integración de Uppy con Angular.
A septiembre de 2026, el wrapper actual admite Angular 17–22, por lo que no es una dependencia que
puedas usar directamente en Angular 14–16. Haz coincidir las dependencias peer del wrapper de
Angular, el núcleo de Uppy y los plugins de interfaz antes de instalarlas. La guía documenta
UppyAngularDashboardModule, su enlace en la plantilla y los estilos;
añade un plugin de subida como Tus o XHRUpload para enviar los archivos seleccionados a tu servidor.
Conclusión
Gestionar la subida de archivos de forma eficaz es esencial para crear aplicaciones web robustas y fáciles de usar. Si comprendes los fundamentos, implementas técnicas avanzadas y sigues las buenas prácticas, podrás crear una experiencia de subida fluida en tus aplicaciones Angular. Para funcionalidades avanzadas, considera explorar bibliotecas especializadas como Uppy. ¡Feliz programación!