Java

How to upload multiple files to server using Ajax and Spring mvc

Here is the example to upload multiple files to server while remain on the same page in client using ajax and spring mvc. In this example we are submitting the form through javascript instead of directly from html.

HTML Code

<form class="form-horizontal" id="myForm" method="POST" enctype="multipart/form-data">
  <fieldset>
    <!-- File Button -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="papers">
        Add Files
      </label>
      <div class="col-md-4">
        <input name="papers" id="modalPapers" type="file" class="filestyle" multiple data-input="false">
      </div>
    </div>
    <!-- Button -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="submit"></label>
      <div class="col-md-4">
        <input type="button" value="Submit" name="submit" onclick="submitForm()" class="btn btn-success">
      </div>
    </div>
  </fieldset>
</form>

Javascript Code

function submitForm() {

  var paperElement = document.getElementById("modalPapers");

  if (!paperElement.value) {
    console.log("No files selected.")
    return;
  }
  var form = document.getElementById("myForm");
  var formData = new FormData(form);
  var xhr = getXMLHTTP();
  xhr.open('POST', "submitFiles");
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log("Files Uploaded")
    }
  }
  xhr.send(formData);
}

Java Code

(server side)

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.apache.commons.io.IOUtils;

@Controller
public class MyController {

  @ResponseBody
  @RequestMapping(value = "submitFiles", method = RequestMethod.POST)
  public String submitPapers(MultipartHttpServletRequest request) {
    List < MultipartFile > papers = request.getFiles("papers");
    try {
      saveFilesToServer(papers);
    } catch (Exception e) {
      return "error";
    }
    return "success";
  }

  public void saveFilesToServer(List<MultipartFile> multipartFiles) throws IOException {
  	String directory = "/home/user/uploadedFilesDir/";
	File file = new File(directory);
	file.mkdirs();
	for (MultipartFile multipartFile : multipartFiles) {
		file = new File(directory + multipartFile.getOriginalFilename());
		IOUtils.copy(multipartFile.getInputStream(), new FileOutputStream(file));
	}
  }

}

You can use any other language also in server side but the html code and javascript code remains the same.

One thought on “How to upload multiple files to server using Ajax and Spring mvc

Leave a Reply

Your email address will not be published. Required fields are marked *