Tengo un problema al cargar un archivo desde mi PC a través de ngForm como parte de un pequeño proyecto que hago para una clase. Parece que no puedo cargar correctamente el archivo ya que durante la depuración obtengo "fakedirectory/name-of-file" en lugar del directorio temporal real. Ya busqué algunas publicaciones relacionadas, pero parecen ser diferentes a mi caso y no puedo hacer que funcionen. Agradecería mucho cualquier ayuda y orientación, ¿qué puedo intentar a continuación? Tengo una parte de frontend del proyecto y un backend de API de descanso separado. Voy a pegar el código relacionado aquí:

HTML:

 <form #addOfferForm="ngForm" (ngSubmit)="submitNewOffer(addOfferForm)"> Here I have other text inputs that work fine ... <input (I tried with ngForm and without) type="file" accept="image/png" id="offerPhoto" (change)="handleOfferPhotoUpload($event)"> ... <button class="public">Publish</button>

Componente:

 offerPhoto?: File handleOfferPhotoUpload(event: InputEvent){ const input: HTMLInputElement = event.target as HTMLInputElement; this.offerPhoto = input.files[0] console.log( "this.offerPhoto" + this.offerPhoto) } addOfferForm: FormGroup = new FormGroup({ offerName: new FormControl(''), ... offerPhoto: new FormControl(''), }) submitNewOffer(addOfferForm: NgForm): void { this.offerService.addOffer$( addOfferForm.value).subscribe({ next: (offer) => { this.router.navigate(['/offers']) }, error: (error) => { console.error(error) } })

Servicio:

 addOffer$(body: { offerName: string, ... offerPhoto: File }): Observable<IOffer> //This is an interface that I use { return this.http.post<IOffer>(`${apiUrl}/offers`, body, { withCredentials: true }); }

Luego en el backend tengo:

 function createOffer(req, res, next) { const { offerName, buyOrSell, cameraOrLens, offerDescription, offerPhoto, offerContact } = req.body; const { _id: userId } = req.user; uploadFile(offerPhoto).then(id => { const offerPhoto = `https://drive.google.com/uc?id=${id}` return offerModel.create({ offerName, ... offerPhoto, userId }) .then(offer => res.json(offer)) .catch(next); })

La función uploadFile funcionó con un formulario más simple en el que solo actualizo una foto que ya está allí pero parece que no puedo cargar la imagen como parte del formulario. Estoy muy atascado y no sé qué más probar. ¡Muchas gracias a cualquiera que pueda ayudarme de antemano!