Télécharger le fichier en Angular

1. Importation de bibliothèques dans Angular
2. Exportation de composants et déclaration de variables dans Angular
3. Utilisation de basicUpload() pour télécharger plusieurs fichiers en Angular
4. Utilisation de basicUploadSingle() pour télécharger un seul fichier en Angular
5. Utilisation de uploadAndProgress() pour télécharger plusieurs fichiers en Angular
6. Utilisation de UploadAndProgressSingle() pour télécharger un seul fichier en Angular
7. Appel de la fonction de téléchargement dans Angular
8. Sommaire

Nous allons vous présenter comment télécharger un fichier dans quatre styles différents en utilisant Angular.

Nous présenterons également comment afficher la barre de progression lorsque le fichier est en cours de téléchargement et afficher les messages de fin de téléchargement de fichier lorsque le téléchargement est terminé.

Importation de bibliothèques dans Angular

Tout d’abord, 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: `
    Version = {{version.full}} <br/>
    <input type="file" (change)="upload($event.target.files)" />
    Upload Percent: {{percentDone}}% <br />
    
    <ng-container *ngIf="uploadSuccess">
      Upload Successful
    </ng-container> 
  `,
})

Exportation de composants et déclaration de variables dans Angular

Maintenant, nous allons exporter notre AppComponent et déclarer les variables percentDone en tant que name et UploadSuccess en tant que booléen. Nous allons également déclarer un constructeur qui appelle HttpClient.

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

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

Utilisation de basicUpload() pour télécharger plusieurs fichiers en Angular

Il existe quatre styles différents de téléchargement de fichiers dans Angular, et le basicUpload() pour plusieurs fichiers est l’un d’entre eux. Plusieurs fichiers peuvent être téléchargés à la fois dans ce style sans afficher de barre de progression pour les fichiers.

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

Nous envoyons des demandes de téléchargement à https://file.io, qui peut être modifiée avec le backend server URL. Le serveur principal recevra les données de téléchargement des fichiers, qui enverront une URL vers le fichier téléchargé.

Utilisation de basicUploadSingle() pour télécharger un seul fichier en Angular

Le deuxième style pour télécharger des fichiers dans Angular est le basicUploadSingle() pour un seul fichier. Dans ce style, l’utilisateur ne peut télécharger qu’un seul fichier à la fois. Ce style n’affichera pas non plus la progression pendant le téléchargement des fichiers.

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

Utilisation de uploadAndProgress() pour télécharger plusieurs fichiers en Angular

Le troisième style de téléchargement de fichiers dans Angular est uploadAndProgress() pour plusieurs fichiers. L’utilisateur peut télécharger plusieurs fichiers simultanément dans ce style, avec une barre de progression affichant le pourcentage de fichiers téléchargés.

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

Utilisation de UploadAndProgressSingle() pour télécharger un seul fichier en Angular

Le quatrième style pour télécharger des fichiers dans Angular est uploadAndProgressSingle() pour un seul fichier. Dans ce style, l’utilisateur peut télécharger simultanément un seul fichier, avec une barre de progression affichant le pourcentage de fichiers téléchargés.

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

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

Maintenant que nous avons ajouté quatre styles de fonctions de téléchargement en Angular, nous pouvons appeler notre fonction de téléchargement avec le style souhaité.

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

Production :

Sommaire

Nous avons discuté de quatre styles différents de téléchargement de fichiers en Angular et de la façon dont 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: `
    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;
        }
    });
  }
}

Production :