Subir archivo en Angular

1. Importando Bibliotecas en Angular
2. Exportación de componentes y declaración de variables en Angular
3. Uso de basicUpload() para cargar varios archivos en Angular
4. Uso de basicUploadSingle() para cargar un solo archivo en Angular
5. Uso de uploadAndProgress() para cargar varios archivos en Angular
6. Uso de UploadAndProgressSingle() para cargar un solo archivo en Angular
7. Llamar a la función de carga en Angular
8. Resumen

Presentaremos cómo cargar un archivo en cuatro estilos diferentes usando Angular.

También presentaremos cómo mostrar la barra de progreso cuando el archivo se está cargando y mostraremos los mensajes de finalización de la carga del archivo cuando se complete la carga.

Importando Bibliotecas en Angular

Primero, importaremos bibliotecas y configuraremos componentes para el cargador de archivos.

# angular
import { Component, VERSION } from '@angular/core';
import {HttpClientModule, HttpClient, HttpRequest, HttpResponse, HttpEventType} from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
    Version = {{version.full}} <br/>
    <input type="file" (change)="upload($event.target.files)" />
    Upload Percent: {{percentDone}}% <br />
    
    <ng-container *ngIf="uploadSuccess">
      Upload Successful
    </ng-container> 
  `,
})

Exportación de componentes y declaración de variables en Angular

Ahora, exportaremos nuestro AppComponent y declararemos las variables percentDone como número y UploadSuccess como booleano. También declararemos un constructor que llame a HttpClient.

# angular
export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;

  constructor(
    private http: HttpClient,
    ) { }
    
  version = VERSION

Uso de basicUpload() para cargar varios archivos en Angular

Hay cuatro estilos diferentes de carga de archivos en Angular, y el basicUpload() para varios archivos es uno de ellos. Se pueden cargar varios archivos a la vez con este estilo sin mostrar ninguna barra de progreso para los archivos.

basicUpload(files: File[]){
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append('file', f))
    this.http.post('https://file.io', formData)
      .subscribe(event => {
        console.log('done')
      })
  }

Estamos enviando solicitudes de carga a https://file.io, que se puede cambiar con la URL del servidor backend. El servidor backend recibirá datos de carga de archivos, que enviarán una URL al archivo cargado.

Uso de basicUploadSingle() para cargar un solo archivo en Angular

El segundo estilo para cargar archivos en Angular es el basicUploadSingle() para un solo archivo. En este estilo, el usuario puede cargar solo un archivo a la vez. Este estilo tampoco mostrará el progreso mientras se cargan los archivos.

basicUploadSingle(file: File){
    this.http.post('https://file.io', file)
      .subscribe(event => {
        console.log('done')
      })
  }

Uso de uploadAndProgress() para cargar varios archivos en Angular

El tercer estilo para cargar archivos en Angular es uploadAndProgress() para varios archivos. El usuario puede cargar varios archivos simultáneamente en este estilo, con una barra de progreso que muestra el porcentaje de archivos cargados.

uploadAndProgress(files: File[]){
    console.log(files)
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append('file',f))
    
    this.http.post('https://file.io', formData, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
    });
  }

Uso de UploadAndProgressSingle() para cargar un solo archivo en Angular

El cuarto estilo para cargar archivos en Angular es uploadAndProgressSingle() para un solo archivo. En este estilo, el usuario puede cargar simultáneamente un solo archivo, con una barra de progreso que muestra el porcentaje de archivos cargados.

uploadAndProgressSingle(file: File){
    this.http.post('https://file.io', file, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
    });
  }

Llamar a la función de carga en Angular

Ahora que hemos agregado cuatro estilos de funciones de carga en angular, podemos llamar a nuestra función de carga con el estilo deseado.

upload(files: File[]){
    //pick from one of the 4 styles of file uploads below
    this.uploadAndProgress(files);
  }

Producción:

Resumen

Discutimos cuatro estilos diferentes de carga de archivos en angular y cómo podemos llamarlos en nuestra función upload. El código completo se proporciona a continuación.

import { Component, VERSION } from '@angular/core';
import {HttpClientModule, HttpClient, HttpRequest, HttpResponse, HttpEventType} from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
    Version = {{version.full}} <br/>
    <input type="file" (change)="upload($event.target.files)" />
    Upload Percent: {{percentDone}}% <br />
    
    <ng-container *ngIf="uploadSuccess">
      Upload Successful
    </ng-container> 
  `,
})
export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;

  constructor(
    private http: HttpClient,
    ) { }
    
  version = VERSION
  
  upload(files: File[]){
    this.uploadAndProgress(files);
  }

  basicUpload(files: File[]){
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append('file', f))
    this.http.post('https://file.io', formData)
      .subscribe(event => {
        console.log('done')
      })
  }

  basicUploadSingle(file: File){
    this.http.post('https://file.io', file)
      .subscribe(event => {
        console.log('done')
      })
  }
  
  uploadAndProgress(files: File[]){
    console.log(files)
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append('file',f))
    
    this.http.post('https://file.io', formData, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
    });
  }
  
  uploadAndProgressSingle(file: File){
    this.http.post('https://file.io', file, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
    });
  }
}

Producción: