1

Buenas tardes a toda la comunidad, estoy intentando subir un formdata desde angular hacia un servicio que esta en django rest framework, sin embargo es importante enviarle el httpHeaders debido a que solo debe hacerse si el usuario esta autenticado, de esta manera paso el formdata:

//Servicio cuando el usuario da click

crearEvento(){
if (this.idLastEvent === undefined){
   this.idLastEvent=0;
}
this.myForm.patchValue({
  id_event: this.idLastEvent+1
});
//Creacion de la constante evento
this.evento  = {
id_event: this.idLastEvent+1,
id_client: this.idClient,
event_name:this.myForm.get('event_name').value,
event_desc:this.myForm.get('event_desc').value,
event_date:this.myForm.get('event_date').value,
event_date_end:this.myForm.get('event_date_finish').value,
event_tipo:this.myForm.get('event_type').value,
event_class:this.myForm.get('event_class').value,
event_image:this.myFile,
event_zoom_id:this.myForm.get('event_zoom_id').value,
event_zoom_pwd:this.myForm.get('event_zoom_pwd').value,
event_payment:this.myForm.get('event_payment').value
};

//Arreglar el fomrulario
const formData = new FormData();
formData.append('event_id', (this.evento.id_event).toString());
formData.append('event_name', this.evento.event_name);
formData.append('event_desc', this.evento.event_desc);
formData.append('event_date', this.datepipe.transform(this.evento.event_date, 'yyyy-MM-dd'));
formData.append('event_date_finish', this.datepipe.transform(this.evento.event_date_end, 
'yyyy-MM-dd'));
formData.append('event_tipo', this.evento.event_tipo);
formData.append('event_class', this.evento.event_class);
formData.append('event_image', this.myFile);
formData.append('event_zoom_id', this.evento.event_zoom_id);
formData.append('event_zoom_pwd', this.evento.event_zoom_pwd);
formData.append('event_payment', this.evento.event_payment?"True":"False");
formData.append('event_change_file', "True");
console.log(formData.get('event_image'))
this.eventService.createEvent(formData,this.idClient).subscribe(data=>{
   console.log(data);
});

}

Aqui esta el eventService.createEvent:

createEvent(body,idClient) {
return this.http.post(this.endpoints.createEvent(idClient), body,  {headers: this.globalService.headers()});
 }

Y aqui esta el servicio en django:

class EventViewSet(viewsets.ModelViewSet):
    queryset = Event.objects.all()
    serializer_class = EventSerializer
    permission_classes = (IsAuthenticated,)

¿Como podria enviar el formdata sin problema?

Muchisimas gracias de antemano


La idea es poder guardar el token en un localstorage (en el momento del login) y pasarlo al servicio de la siguiente forma

var header = {
  headers: new HttpHeaders()
    .set('Authorization', 'Token '+  localStorage.getItem("token"))
}
return this.http.post(this.endpoints.createEvent(idClient), body,  header);

Muchas gracias a todos

2
  • ¿Qué cabecera en específico se tiene que enviar? ¿this.globalService.headers() contiene esa cabecera?
    – Lobos
    el 13 oct. 2021 a las 23:45
  • Muchas gracias por tu ayuda la idea es enviar el token este método this.globalService.headers() tiene lo siguiente : headers() { const token = this.getToken(); console.log(this.httpHeaders) if (token !== '') { this.httpHeaders['Authorization'] = 'Token ' + token;} } return new HttpHeaders(this.httpHeaders); } el 13 oct. 2021 a las 23:54

1 respuesta 1

1

Efectivamente lo pude solucionar poniendo este codigo dentro del header

https://stackoverflow.com/questions/58780482/cant-send-form-data-with-a-bearer-token-in-angular

Muchas gracias

1
  • 1
    Sería que bueno que pusieras el código también para enriquecer la respuesta y que otros usuarios puedan llegar fácilmente a ella.
    – Legna
    el 14 oct. 2021 a las 13:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.