No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Subida de archivos con Http

22/23
Recursos

Una necesidad trivial de un formulario suele ser la carga de un archivo. Un PDF, una foto, etc. Cuando requieres de este tipo de Inputs, tienes que considerar que este archivo está compuesto por datos binarios que tienes que enviar al servidor.

Guardado de binarios en un servidor

En las API REST, el envío de información se realiza en formato JSON con el header Content-type: application/json. Pero para el envío de archivos binarios, se utiliza el header Content-type: multipart/form-data.

Veamos a continuación cómo enviar este tipo de dato con Angular.

1. Formulario para envio de datos

Utilizando la clase FormData, puedes instanciar un formulario de este tipo y adjuntarle con append() el Blob del archivo que quieres enviar el servidor

// services/files.services.ts
export class FilesService {

  constructor(
    private http: HttpClient,
  ) { }

  uploadFile(file: Blob): Observable<any> {
    const form = new FormData();
    form.append('file', file);
    return this.http.post(`https://example.com/api/files`, form, {
      headers: {
        'Content-type': 'multipart/form-data'
      }
    });
  }
}

2. Capturando el archivo

Ahora, desde el componente, tienes que crear un Input que capture el archivo y una función que lo manipule y realice la solicitud.

<div>
    <input type="file" (change)="onLoad($event)">
</div>
onLoad(event: Event): void {
  const element = event.target as HTMLInputElement;
  const file = element.files?.item(0);
  if (file) {
    this.filesService.uploadFile(file)
      .subscribe(res => {
        console.log(res);
      });
  }
}

Cada vez que el usuario cargue un archivo, se ejecutará el método uploadFile() y a través del evento puedes manipular el elemento HTML y capturar el archivo en formato Blob.

Apóyate de la interfaz HTMLInputElement para tipar el elemento y capturar así el archivo.


Contribución creada por: Kevin Fiorentino.

Aportes 6

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Que buen curso.

Vamos a por la siguiente clase.

este curso es una cosa de locos, 10/10 !

No te desanimes, esta bien sentirte frustrado, esta bien todo eso, vas a tu ritmo y no tienes carrera con nadie, si de algo te sirve, conseguí trabajo gracias a este capo llamado Nicolas Molina y de echo sigo utilizando los vídeos incluso si necesito recordar algo.

Ahora estoy haciendo un registro con subida de archivos obligatorios y literal este vídeo hoy por hoy lo utilicé para trabajar, recordar.

Recuerda, no tienes que saber de todo o todo a la perfección, lo que tienes que tener en cuenta es ser recursivo, buscar información y al final, resolver problemas.

No te digo que es fácil, pero valdrá la pena, echale ganas.
#Nunca Pares De Aprender

Que lindo es ver los cursos de Angular de seguido, se aprende mucho, siento que ya me ciento preparado para agregar Angular a mi kit de habilidades ❤️

Epaaaa, ya casi acabo el curso

Si tienen _error _en la funcion onUpload, parsean el file con as Blob:

onUpload(event: Event) {
    const element = event.target as HTMLInputElement;
    const file = element.files?.item(0) as Blob;
    this.filesService.uploadFile(file)
    .subscribe(rta => {
      console.log('upload', rta)
      this.imgRta = rta.location;
    })
  }