Carregar arquivo em Angular

1. Importando Bibliotecas em Angular
2. Exportando Componentes e Declarando Variáveis ​​em Angular
3. Usando basicUpload() para fazer upload de vários arquivos no Angular
4. Usando basicUploadSingle() para fazer upload de um único arquivo no Angular
5. Usando uploadAndProgress() para fazer upload de vários arquivos em Angular
6. Usando UploadAndProgressSingle() para fazer upload de um único arquivo no Angular
7. Chamando a função de upload em Angular
8. Resumo

Apresentaremos como fazer upload de um arquivo em quatro estilos diferentes usando o Angular.

Também apresentaremos como exibir a barra de progresso quando o arquivo está sendo enviado e como exibir mensagens de conclusão de upload de arquivo quando o upload for concluído.

Importando Bibliotecas em Angular

Primeiro, importaremos bibliotecas e definiremos componentes para o uploader de arquivos.

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

Exportando Componentes e Declarando Variáveis ​​em Angular

Agora, vamos exportar nosso AppComponent e declarar as variáveis ​​percentDone como number e UploadSuccess como booleano. Também declararemos um construtor que chama HttpClient.

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

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

Usando basicUpload() para fazer upload de vários arquivos no Angular

Existem quatro estilos diferentes de upload de arquivo no Angular, e o basicUpload() para vários arquivos é um deles. Vários arquivos podem ser carregados de uma vez neste estilo sem exibir nenhuma barra de progresso para os arquivos.

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 solicitações de upload para https://file.io, que podem ser alteradas com a backend server URL. O servidor backend receberá dados de upload de arquivos, que enviarão uma URL para o arquivo enviado.

Usando basicUploadSingle() para fazer upload de um único arquivo no Angular

O segundo estilo de upload de arquivos em Angular é basicUploadSingle() para um único arquivo. Neste estilo, o usuário pode carregar apenas um arquivo por vez. Este estilo também não exibirá o progresso durante o upload dos arquivos.

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

Usando uploadAndProgress() para fazer upload de vários arquivos em Angular

O terceiro estilo de upload de arquivos em Angular é uploadAndProgress() para vários arquivos. O usuário pode fazer upload de vários arquivos simultaneamente neste estilo, com uma barra de progresso exibindo a porcentagem de arquivos carregados.

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

Usando UploadAndProgressSingle() para fazer upload de um único arquivo no Angular

O quarto estilo de upload de arquivos em Angular é uploadAndProgressSingle() para um único arquivo. Neste estilo, o usuário pode carregar simultaneamente um único arquivo, com uma barra de progresso exibindo a porcentagem de arquivos carregados.

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

Chamando a função de upload em Angular

Agora que adicionamos quatro estilos de funções de upload ao angular, podemos chamar nossa função de upload com o estilo desejado.

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

Resultado:

Resumo

Discutimos quatro estilos diferentes de upload de arquivo no angular e como podemos chamá-los em nossa função de upload. O código completo é fornecido abaixo.

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

Resultado: