Lumen file request returns an empty object

Question

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?