Cant Append files in form data

Question

I want to upload files using formData and axios to a Symfony 3 backend, my problem is files is not appended but other text input sends successfully to backend

let company = document.getElementById('company_photo');
let companyLogo = company.files[0];

let form =document.getElementById('my-form-id');
let data = new FormData(form);
data.append('profile', companyLogo, companyLogo.name)


const config = {
     headers: {
           'content-type': 'multipart/form-data'
     }
 }
  axios.post(url, data, config)..................

The problem with this, is when I tried to return the files from Symfony 3

return new JsonResponse(['files' => $request->files->all()])

It just return empty object

profile:{}

All other input type text are successfully sent to server

Looking at network tab, the payload looks like

clients_per_month: 4
message: rurutrurturrurtuturturt
profile: (binary)

the profile becomes binary

The form looks like this

<form id='some-id' method="POST" enctype="multipart/form-data">
    <input type="text" name="blah" />
    <input type="file" name="filenameexample" id="exampleid">
    ........................

Looking at the console for debug,

for(var key of data.entries()) {
   console.log(key[0] + ','+key[1]);
}

Which resulted in

profile, [object File]

Any ideas to fix this?

update, the file looks like this

     console.log(company.files[0])

Resulted in

     File {name: "Capture.PNG", lastModified: 1546921233553, 
         lastModifiedDate: Tue Jan 08 2019 12:20:33 GMT+0800 (Pluto 
         Standard Time), webkitRelativePath: "", size: 735825, …}
         lastModified: 1546921233553
         lastModifiedDate: Tue Jan 08 2019 12:20:33 GMT+0800 (Venus 
         Standard Time) {}
         name: "Capture.PNG"
         size: 735825
         type: "image/png"
         webkitRelativePath: ""
         __proto__: File

Quentin Quentin · Accepted Answer · 2019-04-17T10:38:56

'content-type': 'multipart/form-data'

The mandatory boundary parameter is missing from your MIME type.

Remove that line. Allow XMLHttpRequest to infer the MIME type from the FormData object.

Cant Append files in form data

1 Answers