I'm using Vue + Axios and tried to submit file unto my Lumen app
HTML
<input type="file" ref="inputfile">
<input type="file" ref="inputfile2">
<button @click="submit">Submit</button>
Vue
methods : {
submit(){
var formData = new FormData();
formData.append('listing_id',222);
formData.append('listing_title','Listing Title');
if( this.$refs.inputfile.value != '' ){
formData.append('attachment',this.$refs.inputfile.files[0]);
}
if( this.$refs.inputfile2.value != '' ){
formData.append('attachment2',this.$refs.inputfile2.files[0]);
}
axios.post(
'https://api.domain.com/api/v3/claim',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(function(res){
console.log(res);
})
}
}
and in my Lumen app
return response()->json([ 'success' => true, 'data' => $request->file('attachment') ]);
and the Lumen app just returns an empty object unexpectedly
I can confirm that there is a file request just by
$request->hasFile('attachment');
and it returns true, and also by
$request->file()
it returns me an array of empty objects.
I can validate also the formData
contents by doing so
formData.forEach(function(el){
console.log(el.name);
});
and it returns me the file name of each attachment (without extra data from above fields).
What seems wrong or problem that file requests returns an empty object instead?