How to process formData, getting empty array

Hi, I have this frontend code where I upload an image file:

<input
    @change="changeProfilePicture"
    type="file"
    accept="image/*"
/>

async function changeProfilePicture(event) {
    let formData = new FormData()
    let file = event.target.files[0]
    let filename = event.target.files[0].name

    formData.append('file', file)
    formData.append('filename', filename)

    fetch('user-settings/profile-picture', {
        method: 'POST',
        body: formData,
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
    })   
}

And this is what I see in the payload

------WebKitFormBoundaryMDh1oCbNjpJhY4vV
Content-Disposition: form-data; name="file"; filename="my-profile-pic.png"
Content-Type: image/png

------WebKitFormBoundaryMDh1oCbNjpJhY4vV
Content-Disposition: form-data; name="filename"

my-profile-pic.png
------WebKitFormBoundaryMDh1oCbNjpJhY4vV--

But on the Laravel backend I'm getting an empty array:

public function store()
{
    dd(request()->all());

    $path = request()->file('file')->store('app/public/img/uploads');

    return $path;
}

result

[ ]