Send file to MVC Controller - ajax

Question

I have refer the below link to upload the file but I keep getting
https://www.baeldung.com/spring-file-upload
This I have in my Thymeleaf file:
<div>
<form method="POST" action="esubmission/submitter/uploadFile" enctype="multipart/form-data" onclick="disableOnBeforeUnload()" >
<table>
<tr>
<td><label path="file">Select a file to upload</label></td>
<td><input type="file" name="file" /></td>
</tr>
<tr>
<td><input type="submit" value="Submit"/></td>
</tr>
</table>
</form>
</div>
This is my javascript function
function disableOnBeforeUnload() {
window.removeEventListener("beforeunload", windowClosedOrReloaded);
}
This is my controller:
#RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
public String submit(#RequestParam("file") MultipartFile file, ModelMap modelMap) {
modelMap.addAttribute("file", file);
return "fileUploadView";
}
As you can see I have the call to function in controller but I am getting 404 error
2020-09-07 16:19:05.332 DEBUG 81932 --- [nio-8080-exec-3] o.s.w.s.r.ResourceHttpRequestHandler : Resource not found
[2020-09-07 16:19:05,332] DEBUG o.s.w.s.r.ResourceHttpRequestHandler - Resource not found
2020-09-07 16:19:05.332 DEBUG 81932 --- [nio-8080-exec-3] o.s.web.servlet.DispatcherServlet : Completed 404 NOT_FOUND
What I am missing??
I also tried using ajax call like below:
function uploadDocument(){
$.ajax({
type: "POST",
contentType: "application/json",
url: "/appName/role/uploadFile/",
timeout: 100000,
success: function (result) {
console.log("SUCCESS");
},
error: function (e) {
console.log("ERROR: ", e);
},
done: function (e) {
console.log("DONE");
}
});
}

Answer 1

Verify that your path url /appName/role/uploadFile/ is correct
Because server returning 404 that means path is not correct.
If you are using this script on that same page no need to put /appname/role/
you can simply pass that method name as you are on same controller.