0

I'm trying to send user uploaded image to Laravel Backend, but data seems to be always empty.

On angular front-end:

...
...
let formData = new FormData();
formData.append('photo', <File> event.target.files[0]);
console.log(formData.get('photo'))

I'm doing quick console log to check if data were appended successfully, and they were. Then I'm calling function that is sending data to the backend where I also send formData as param named photo that means formData = photo, so the code is:

this.http.post(`${environment.api}/v1/photo`, { photo }, { headers });

In headers I'm setting auth info along with:

Content-Type: multipart/form-data

My post is hitting backend route and if I add any data to post, I am able to read them, but if I ask for file named photo I'm getting null, I have also tried dump $request->all() but its empty. I think I have tried every possible way to get photo from $request, right one should be:

$request->file('photo')

Im also importing .....Http\UploadedFile lib because I read somewhere it helped somebody, without luck, I am aware that you are not able to see formData in network tab in browser but might be useful to mention that data I'm sending shows up in Chrome like:

{photo: {}}
Pauli
  • 388
  • 4
  • 17
  • 1
    "I also send formData as param named photo" — You can't do that. The **entire** HTTP payload must be generated using the FormData object. Angular has no mechanism to extract data from it and insert it into the JSON payload that it generates when you pass it an object. – Quentin May 03 '18 at 07:46
  • Hey Quentin, that was indeed part of the issue, I have replaced `{photo}` with `photo` now data was sent, but I was still not able to see them in backend, after I removed header `Content-Type: multipart/form-data` everything worked. Thanks – Pauli May 03 '18 at 08:01

0 Answers0