Télécharger une image en Angular

1. Télécharger une image en Angular
2. Exporter des composants et déclarer des variables dans Angular
3. Téléchargement de base pour plusieurs images dans Angular
4. Téléchargement de base pour une seule image dans Angular
5. Télécharger et progresser pour plusieurs images dans Angular
6. Télécharger et progresser pour une seule image dans Angular
7. Appel de la fonction de téléchargement dans Angular

Cet article présente les éléments suivants :

1. Téléchargez une image dans quatre styles différents à l’aide d’Angular.
2. Affichez la barre de progression lorsque l’image est téléchargée.
3. Affichez un message de fin de téléchargement d’image lorsque le téléchargement est terminé.

Télécharger une image en Angular

Les images sont un élément de base de toute application Web, et chaque site Web contient des images. Dans ce tutoriel, nous allons apprendre à télécharger une image dans Angular de différentes manières.

Créons une nouvelle application en utilisant la commande ci-dessous.

# angular
ng new my-app

Après avoir créé notre nouvelle application dans Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.

# angular
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Nous allons importer des bibliothèques et définir des composants pour le téléchargeur de fichiers.

# 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'],
})

Exporter des composants et déclarer des variables dans Angular

Nous allons exporter notre AppComponent et déclarer les variables percentDone comme un number et UploadSuccess comme un boolean. Nous allons également déclarer un constructeur, qui appelle HttpClient.

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

  constructor(private http: HttpClient) {}

Téléchargement de base pour plusieurs images dans Angular

Il existe 4 styles différents de téléchargement d’images dans Angular ; le téléchargement de base de plusieurs images en fait partie. Plusieurs images peuvent être téléchargées dans ce style sans afficher de barre de progression pour les images.

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

Nous envoyons des demandes de téléchargement à https://file.io, qui peuvent être modifiées avec l’URL du serveur principal. Le serveur principal recevra les données d’images téléchargées, qui enverront une URL au fichier téléchargé.

Téléchargement de base pour une seule image dans Angular

Le deuxième style de téléchargement d’images dans Angular est le téléchargement de base d’un fichier image. Dans ce style, l’utilisateur ne peut télécharger qu’une seule image à la fois.

Ce style n’affichera pas non plus la progression pendant le téléchargement des images.

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

Télécharger et progresser pour plusieurs images dans Angular

Le troisième style de téléchargement d’images dans Angular est le téléchargement avec progression pour plusieurs images. L’utilisateur peut télécharger plusieurs images avec une barre de progression affichant le pourcentage téléchargé dans ce style.

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

Télécharger et progresser pour une seule image dans Angular

Le quatrième style de téléchargement d’images dans Angular est une image unique avec une barre de progression. L’utilisateur peut télécharger une seule image avec une barre de progression affichant le pourcentage téléchargé dans ce style.

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

Appel de la fonction de téléchargement dans Angular

Nous avons ajouté quatre fonctions de téléchargement dans Angular ; nous pouvons appeler notre fonction de téléchargement avec le style souhaité.

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

Production:

Résumé

Nous avons discuté de quatre styles différents de téléchargement d’images dans Angular et comment nous pouvons les appeler dans notre fonction upload. Le code complet est donné ci-dessous.

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

Démo ici