Que buen curso.
Vamos a por la siguiente clase.
Http Basic
Lo que aprenderás para consumir API con Angular
Solicitudes GET
Detalle de producto
Implementando slides
Solicitudes POST
Solicitudes PUT y PATCH
Solicitudes DELETE
Url Parameters / Paginación
Observable vs. Promesa
Reintentar una petición
Buenas prácticas
El problema de CORS
Manejo de ambientes
Manejo de errores
Transformar peticiones
Evitando el callback hell
Auth
Login y manejo de Auth
Manejo de headers
Uso de interceptores
Enviar Token con un interceptor
Creando un contexto a interceptor
Archivos
Descarga de archivos con Http
Subida de archivos con Http
Despedida
Continúa con el Curso de Angular Router y Programación Modular
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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.
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'
}
});
}
}
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
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;
})
}
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.