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 11

Preguntas 5

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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 buen curso.

Vamos a por la siguiente clase.

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

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 ‚̧ԳŹ

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

Epaaaa, ya casi acabo el curso

No me deja subir la imagenme sale internal server error sera que se cayo ese endpoint?

Recibo error 503, aun esta disponible el endpoint?

Para cambiar de ambiente si estaban trabajando con el local

ng serve --configuration=production --port=3500

Excelente curso.
Buen contenido, gran profesor y se aprende bastante

Good Job