Subir imagen en Angular

1. Subir una imagen en Angular
2. Exportar componentes y declarar variables en Angular
3. Carga básica para múltiples imágenes en Angular
4. Carga básica para una sola imagen en Angular
5. Carga y progreso de varias imágenes en Angular
6. Carga y progreso de una sola imagen en Angular
7. Llamar a la función de carga en Angular

Este artículo presenta lo siguiente:

1. Cargue una imagen en cuatro estilos diferentes usando Angular.
2. Muestra la barra de progreso cuando la imagen se está cargando.
3. Muestre un mensaje de finalización de carga de imágenes cuando se complete la carga.

Subir una imagen en Angular

Las imágenes son una parte básica de cualquier aplicación web y cada sitio web tiene imágenes. En este tutorial, aprenderemos cómo cargar una imagen en Angular de diferentes maneras.

Vamos a crear una nueva aplicación usando el siguiente comando.

# angular
ng new my-app

Después de crear nuestra nueva aplicación en Angular, iremos al directorio de nuestra aplicación usando este comando.

# angular
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

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: `
    <input type="file" accept=".jpg,.png" class="button" (change)="upload($event.target.files)" />
    <p>Upload Percent: {{percentDone}}% </p> <br />

    <ng-container *ngIf="uploadSuccess" class="success">
      <p class="sucess">Upload Successful</p>
    </ng-container>
  `,
  styleUrls: ['./app.component.css'],
})

Exportar componentes y declarar variables en Angular

Exportaremos nuestro AppComponent y declararemos las variables percentDone como number y UploadSuccess como boolean. También declararemos un constructor, que llama HttpClient.

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

  constructor(private http: HttpClient) {}

Carga básica para múltiples imágenes en Angular

Hay 4 estilos diferentes de carga de imágenes en Angular; la carga básica de varias imágenes es una de ellas. Se pueden cargar varias imágenes con este estilo sin mostrar una barra de progreso para las imágenes.

basicUploadImage(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á los datos de las imágenes cargadas, que enviarán una URL al archivo cargado.

Carga básica para una sola imagen en Angular

El segundo estilo para cargar imágenes en Angular es la carga básica para un archivo de imagen. En este estilo, el usuario puede cargar solo una imagen a la vez.

Este estilo tampoco mostrará el progreso mientras se cargan las imágenes.

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

Carga y progreso de varias imágenes en Angular

El tercer estilo para cargar imágenes en Angular es cargar con progreso para múltiples imágenes. El usuario puede cargar varias imágenes con una barra de progreso que muestra el porcentaje cargado en este estilo.

uploadImageAndProgress(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;
        }
      });
  }

Carga y progreso de una sola imagen en Angular

El cuarto estilo para cargar imágenes en Angular es una sola imagen con una barra de progreso. El usuario puede cargar una sola imagen con una barra de progreso que muestra el porcentaje cargado en este estilo.

uploadAndProgressSingleImage(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

Hemos agregado cuatro funciones de carga en Angular; podemos llamar a nuestra función de carga con el estilo deseado.

uploadImage(files: File[]) {
    this.uploadImageAndProgress(files);
  }

Producción:

Resumen

Discutimos cuatro estilos diferentes de carga de imágenes 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: `
    <input type="file" accept=".jpg,.png" class="button" (change)="uploadImage($event.target.files)" />
    <p>Upload Percent: {{percentDone}}% </p> <br />

    <ng-container *ngIf="uploadSuccess" class="success">
      <p class="sucess">Upload Successful</p>
    </ng-container>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;

  constructor(private http: HttpClient) {}

  uploadImage(files: File[]) {
    this.uploadImageAndProgress(files);
  }

  basicUploadImage(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');
    });
  }

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

  uploadImageAndProgress(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;
        }
      });
  }

  uploadAndProgressSingleImage(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;
        }
      });
  }
}

Demostración aquí