Null Form Data File Object

I have a file input that has on onchange attribute. Whenever a user selects a file.

<input type="file" name="avatar" id="profile-pic" class="w-full self-end" accept="image/png, image/jpeg" onchange="uploadAvatar(this)">

When the event is triggered I attempt to make an async call to upload the image

 function uploadAvatar(elem){
        console.log(elem)
        const file = elem.files[0];
        const formData = new FormData()
        formData.append('avatar',file);

        fetch('/avatar',{
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: formData
        }).then(response => response.json())
            .then(data => {
                console.log(data)
            })
            .catch(error => {
                console.error(error)
            })
    }

Route::post('avatar',function (){
    if(is_null(request()->get('avatar'))){
        return response()->json('nothing');
    }
    else{
        return response()->json('something');
    }
});

However, although $request->get('avatar') returns an array/exists it is empty/null. I have been trying to find out why the form data is empty.