Upload de arquivo genérico utilizando Angular de forma simples.

Bruno Selhorst — Mon, 15 May 2023 12:30:02 +0000

Irei demonstrar como fazer o upload de arquivos de uma forma bem simples, utilizando o Angular.

Na página do component.html deve-se colocar a chamada de função da forma que desejar, no meu caso, eu coloquei a chamada de função ao alterar o arquivo, ou seja, ao alterá-lo, a função será acionada e o arquivo será enviado para o servidor. Ele passará um evento.

<input type="file" id="file" (change)="fileUpload($event)" hidden/>

Na página do component.ts deve-se criar uma variável recebendo o tipo File dentro do export.

file: File | null = null;

Ainda na página do component.ts e dentro do export, deve-se criar a função de upload.

// Função recebendo o evento como qualquer coisa
fileUpload(event: any){
  // Pega apenas o primeiro valor, já que estamos pegando apenas uma arquivo.
  // Se fosse vários arquivos, era só alterar o 0 por uma variável
  this.file = event.target.files[0];
  // Foi adicionado uma constante de parâmetros
  // É opcional, depende do endpoint
  const parametros = [
    {
      // Eu devo receber no meu endpoint um arquivo e um body, e o body deve conter tipoDocumento = id_do_documento
      // Nesse caso, estou passando o id do documento manualmente, porém, é para ser passado através de uma variável
      "parametro": "tipoDocumento",
      "valor": "1",
    },
  ];
  // Conexao passando: 
  // O endpoint 
  // O arquivo 
  // Os parâmetros (opcional) 
  // O header com o token de autenticação (em casos que usam)
  this.conexao.postFile(this.endpoint_documentos, this.file!, 
    parametros, this.requestOptions).subscribe();
  }

No arquivo do service, que eu chamo de conexao.service.ts, cria-se a função de envio de arquivo que chamei de postFile.

// Recebe os parâmetros antes comentados, os que forem opcionais, basta retirá-los daqui e da chamada anterior.
postFile(endpoint: string, file: File, parametros: any, headers: any): Observable<any>{
  // Cria uma variável do tipo FormData()
  let formParams = new FormData();
  // Faz um append colocando o nome do arquivo que é file (o mesmo do HTML)
  formParams.append('file', file);
  // Nesse caso em específico, eu fiz um loop para pegar quantos parâmetros fossem necessários, mas essa parte é opcional
  parametros.forEach((item: any) => {
    // Faço o appen no formParams com o parâmetro, valor
    formParams.append(item.parametro, item.valor);
  });
  // Dou um return passando o endpoint, formParams e o header que é o número máximo de arquivos que podem ser passados
  return this.http.post(endpoint, formParams, headers).pipe(res=>res, erro=>erro);
}

E é só isso, bem simples, direto e genérico, podendo ser utilizado em qualquer lugar.

Forem: Bruno Selhorst

Upload de arquivo genérico utilizando Angular de forma simples.