I am trying to send a CSV file with an AJAX request en then handle it in a controller. My problem is I am getting a null file in my controller.

Here is my AJAX request :

let csvfile = csvFile.files[0]
var data = new FormData();

data.append('file', csvfile)
// console.log(...data)
$.ajax({
    type        :   'POST',
    url         :   '/template/generateAuto/' + templateId,
    contentType: false,
    processData : false,
    data: data,
    success: function(msg) {console.log(msg)},
});

Here is my controller function that should handle the file

$file = $request->files->get('file');
return new JsonResponse($file);

I here am just trying to debug that's why there's only this part of code in my controller.

I tried dumping the $request in my controller but I have nothing.

I have already looked at this similar question but I can't find what I am doing wrong. Since I tried dumping my $requestand it is empty. Also, doing a console.log(...data) outputs this :

0 "file"
1 File {name: "template74.csv", lastModified: 1651136688000, webkitRelativePath: "", size: 200, type: "text/csv", …}

So my file is in my FormData.