i've been struggling for a while to send a file from html to my Java controller using AJAX and my nerves got to an end. I've read multiple answers on stack overflow but nothing worked for me. I am using Brave as browser.

This is my HTML:

<div>
   <button type="button" onclick="uploadFile()">Import</button>
     <div class="custom-buttons">
        <button onclick="clickRealFile()"type="button" name="button">Pick file</button>
         <input onchange="changeInputText(this)" id="real-file-second" type="file" name="file" hidden="hidden">
    <p style="margin-left: 0.3rem;" id="custom-text">Upload file</p>
     </div>
</div>

Here i just use a fake input to style the "pick file" button, don't mind what's happening here because in javascript the file gets picked correctly

JAVASCRIPT

function uploadFile() {
    let formData = new FormData();
    console.log($("#real-file-second")[0].files[0])
    formData.append("file", $("#real-file-second")[0].files[0]);
    $.ajax({
        url: encodeURI(window.location.origin + "/upload"),
        type: 'POST',
        contentType: false,
        cache: false,
        processData: false,
        data: formData

    })
}

Java Controller

@PostMapping("/upload")
public void importProducts(@RequestParam("file") MultipartFile file) throws IOException {
System.out.println("I've reached here");
}

Everything i've try ends up in 404 error. I don't know if there is a problem with my browser or with my code but all the solutions from internet are not working for me