$request->hasFile('file') doesn't detect uploaded file

Hi! I'm trying to figure out why $request->hasFile('file') is not detecting an uploaded file.

I'm sending the file via Javascript using an XMLhttprequest like this:

(function() {
    var HOST = "http://127.0.0.1:8000/storage/"
    var sendRequestUrl = "http://127.0.0.1:8000/api/v1/store-image"
    function createStorageKey(file) {
        var date = new Date();
        var noSpacesName = file.name.replace(/\s/g, '-').toLowerCase();
        var name = date.getTime() + "-" + noSpacesName;
        return name;
      }
      function createFormData(key, file) {
        var data = new FormData()
        data.append("key", key)
        data.append("Content-Type", file.type)
        data.append("file", file)
        return data
      }
    addEventListener("trix-attachment-add", function(event) {
      if (event.attachment.file) {
        uploadFileAttachment(event.attachment)
      }
    })
    // app/javascript/trix-editor-overrides.jslotr
    window.addEventListener("trix-file-accept", function(event) {
        const acceptedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/heic']
        if (!acceptedTypes.includes(event.file.type)) {
        event.preventDefault()
        alert("Formato no permitido. Sube una imagen con extensión permitida: jpg, jpeg, png o heic")
        }
    })
    // app/javascript/trix-editor-overrides.js
    window.addEventListener("trix-file-accept", function(event) {
        const maxFileSize = 2048 * 2048 // 4MB 
        if (event.file.size > maxFileSize) {
        event.preventDefault()
        alert("El tamaño máximo permitido es de 4MB")
        }
    })
    function uploadFileAttachment(attachment) {
      uploadFile(attachment.file, setProgress, setAttributes)
      function setProgress(progress) {
        attachment.setUploadProgress(progress)
      }
      function setAttributes(attributes) {
        attachment.setAttributes(attributes)
      }
    }
    function uploadFile(file, progressCallback, successCallback) {
      var key = createStorageKey(file);
      var formData = createFormData(key, file);
      var xhr = new XMLHttpRequest();
      xhr.open("post", sendRequestUrl, true);
      xhr.upload.addEventListener("progress", function(event) {
        var progress = event.loaded / event.total * 100
        progressCallback(progress)
      });
      xhr.addEventListener("load", function(event) {
        if (xhr.status == 204) {
          var attributes = {
            url: HOST + key,
            href: HOST + key + "?content-disposition=attachment"}
          successCallback(attributes)} 
      });
      xhr.send(formData);
    }
})();

The important function, I think, is createFormData() and the last line where i do xhr.send(formdata)

If I inspect the formdata object using:

      for (var pair of formData.entries()) {
        console.log(pair[0]+ ', '+ pair[1]);
      };

before sending formdata I can see this in Chrome console:

key, 1714005757016-ejercicio.png
Content-Type, image/png
file, [object File]

formdata is processed by this part of my APIController.php:

    public function storePostImages(Request $request)
    {
        // Evaluate if method is POST
        if ($request->isMethod('post')) {

            // Evlauate if a file is been uploaded
            if ($request->hasFile('file')) {
                // Assign posted file to variable
                $file = $request->file('file');
                // Evaluate if file is an image
                if (getimagesize($file)) {
                    //
                } else {
                    return response()->json(['error' => 'file type not supported'], 415);
                }
                // Get file name assigned in front end
                $fileName = $_POST['key'];
                // Store image in public folder so that it can be accessible in front end
                Storage::disk('public')->put($fileName, file_get_contents($file));
                
                // Return successful response
                return response()->json(['message' => 'success'], 204);
            }

            return response()->json(['message' => 'No file'], 400);
        } 
        
        return response()->json(['message' => 'error'], 405);
}

And after all of it I get back this response: POST http://127.0.0.1:8000/api/v1/store-image 400 (Bad Request)

Which is an http response I added in APIController.php storePostImages, which means that the conditional statement if ($request->hasFile('file')) is returning false.

So why is $request->hasFile('file') not detecting file if formdata does have a 'file' key and an ObjectFile?

The strange thing is that 2 days ago this was working and I can't seem to find what is going on right now...