post error Required MultipartFile [ ] parameter not present

Question

Does anyone know why I am getting the above error? I cant see why? please see my code below and advise where i can fix this error. The aim is to upload multiple files to a location. It used to work for a single file, however it looks like the formdata or ajax request is only used to accepting one file and not multiple. I am not doing this in PHP, only javascript/java. Please help.

    function makeProgress(number){   
      var url = getRelativeURL("web/fileUpload");        
      var formData = new FormData();
      formData.append('number', number);
      fls = document.getElementById("attachmentFileUploadInput").files; //length of files... 
      console.log(fls);
      for(j=0;j<fls.length;j++){
          formData.append('files[]', fls[j]);  //note files[] not files
      }
      //formData.append('file', $('input[type=file]')[0].files[0]);
      console.log("form data " + formData);
      $.ajax({
          url : url,
          data : formData,
          processData : false,
          contentType : false,
          type : 'POST',
          success : function(data) {
           FileUploadVisible(true);
           $('#attachmentModal').modal('hide')
           $(':input','#attachmentModal').val("");
            $("#pbarmain").hide();
            $("#pbar").hide();
            $("#actionPlanDiv").hide();
            setObjectEnabled('#Upload',false);
          },
          error : function(err) {
              FileUploadErrorVisible(true);
          }
     });

        }

@Bean(name = "multipartResolver")
public CommonsMultipartResolver commonsMultipartResolver(){
    CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver();
    commonsMultipartResolver.setDefaultEncoding("utf-8");
    commonsMultipartResolver.setMaxUploadSize(5000000); // 5000000 -> 5MB
    return commonsMultipartResolver;

} }

@RequestMapping(value = { "/fileUpload" }, method = RequestMethod.POST)
@ResponseBody
public String uploadFile( @RequestParam("number") String number, @RequestParam("files") MultipartFile[] files, MultipartHttpServletRequest req, HttpServletResponse res)
{       
    for (MultipartFile file : files) {
    try {
        File directory = new File(UPLOADED_FOLDER + number);
                if (! directory.exists()){
                    directory.mkdir();
                  }
            byte[] bytes = file.getBytes();
            Path path = Paths.get(UPLOADED_FOLDER + number + "//" + file.getOriginalFilename());
            Files.write(path, bytes);
            logger.info("You have successfully uploaded '" + file.getOriginalFilename() + "'");
            return("File Uploaded");


    } catch (Exception e) {
        res.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
        logger.error("Failed to upload file '" + file.getOriginalFilename() + "'", e);
        return("File Not Uploaded");
    }
}
    return "redirect:/fileUpload";
}

}

Answer 1

you have to use..

 @RequestMapping(method = RequestMethod.POST, headers = ("content-
        type=multipart/*"), produces = "application/json", consumes = "file/*")
 public String uploadFile(@RequestParam("number") String number, @RequestParam("files") MultipartFile files) {

and also use contentType: 'multipart/form-data into javascript code

     url : url,
      data : formData,
      processData : false,
      contentType: 'multipart/form-data',
      type : 'POST',
      success : function(data) {