Here is a quick cheat sheet on performing a File Upload either via a REST call or via traditional Spring MVC.  This is based on Spring Boot 1.5.

First make sure your @Controller or @RestController class has a method such as this:

@PostMapping(value = "/documents", produces = MediaType.APPLICATION_JSON_VALUE)
public ResponseEntity uploadDocument(@RequestParam("pdffile") MultipartFile pdfFile) { ... }

We want to capture post requests (i.e. a FORM posting data) therefore we use the latest style at this time which is @PostMapping and the URL we want to post to.  Make sure to use the MultipartFile type.  The @RequestParam is the name of the input field in your form.  We also tell Spring Boot that we want to return JSON since we are using a REST approach for file upload as we are going to use jQuery or some asynchronous approach.  Since our controller is not going to return anything exciting, we will return only a ResponsEntity class with no generic type attached.

return ResponseEntity.ok().build();

Since we’re working on our server side code, it may be wise to set the file upload and request size limits in your since you very likely will get limit size exceptions when you test.  So add something like this to that properties file which limits the size to 50MB but you can set this to whatever you want.


Our form in our HTML page is simple.  We want to upload a PDF file (you can call it whatever you want) or you can also pass other form parameters but that is beyond the scope of this. We are merely demonstrating a File Upload.  Note the enctype parameter which is required and we also attach some IDs to our HTML elements since we want to use those when jQuery is invoked.

<form action="/documents" name="frmPdfUpload" method="post" id="frmPdfUpload" enctype="multipart/form-data">
 <input type="file" id="pdffile" name="pdffile">

So we are posting to our REST endpoint (/documents) as defined in our Controller class and our Request Param is called pdffile as defined by our input field and by our @RequestParam.  Call em what you want but make sure they are identical, case and all!!

Now the jQuery code:

(function ($) {
 $("#uploadDocument").on("click", function (e) {
 var formData = new FormData(document.forms["frmPdfUpload"]);
 url: '/documents',
 type: 'POST',
 data: formData,
 async: false,
 cache: false,
 contentType: false,
 processData: false,
 success: function (data) {

 error: function (data) {
 return false;

Basically, you are acting on the click of a button that launches the upload and it creates a new FormData object instance.  I tried the form serialize and it was a pain to get working, but this works.  Make sure to pass your form name/id in the document.forms.  When you debug into the code right after you create the formData instance, it will appear that nothing is in that object, it looks empty which can be misleading.  So set a breakpoint right after the var formData line and run this command in the console:

formData.forEach(d => console.log(d));

This will output the fields being sent in the request which can help troubleshoot anything you have issues with.  Now do whatever you want given a success or a failure, ie an alert message or redirect or whatever you wish.