Spring mvc multiple file upload while working on WebSphere Liberty

Question

I am running into strange problem while trying to upload multiple files using ajax. why we are using Ajax to upload multiple file ? Because user wants to review all the files which he/she is trying to upload to server. what mean by review is, user should be allowed to delete file before uploading to server.

What i tried so far?

JSP

<form id="form1" method="post" action="uploadMultipleFiles" enctype="multipart/form-data">
  <!-- File input -->    
  <input name="file" id="files" type="file"  multiple="multiple"/><br/>
  <button value="Submit" onclick="uploadFiles()" >Upload</button><i>upload</i>
</form>

JS

function uploadFiles(){
  var files = $("#files").prop("files");
  var oMyForm = new FormData();   
  oMyForm.append("file", files[0]);  //currently trying with only one file
      $.ajax({
            url:  'uploadMultipleFiles',
            data: oMyForm,
           // dataType: 'text',
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data){
                console.log(data)
            }
          });
}

Spring Controller (Version 3.0.0 release)

@RequestMapping(value = "/uploadMultipleFiles", method = RequestMethod.POST)
    public @ResponseBody String uploadMultipleFilesHandler(HttpServletRequest request, HttpServletResponse response)  {
  MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
  System.out.println(multipartRequest);   
}

I have not included entire code of controller but i believe it should be sufficient for any pointer which you can provide.

Spring bean configuartion

<bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

        <property name="maxUploadSize" value="900000" />

</bean>

Exception

java.lang.ClassCastException: com.ibm.ws.webcontainer31.srt.SRTServletRequest31 cannot be cast to org.springframework.web.multipart.MultipartHttpServletRequest

Kindly help me figure out what i could do to resolve this exception and please note same code is working file in tomcat however WebSphere Liberty profile seems to have some issue.

So clearly WebSphere is giving you a WebSphere-specific `HttpServletRequest` implementation instance, which cannot be cast into a Spring `MultipartHttpServletRequest`. And apparently Tomcat's implementation is a bit different. The question is, can this casting approach work with Liberty, or must a different approach be used... Or maybe not even using Spring MVC. — dbreaux, Jul 23 '18 at 18:22
I don't know if it's possible to you... but why not to use a specific JQuery plugin like https://blueimp.github.io/jQuery-File-Upload/? I used it in IBM WebSphere and IBM Portal (inside portlets) it worked pretty good — Angelo Immediata, Jul 31 '18 at 14:30

score 4 · Answer 1 · answered Aug 02 '18 at 15:03

You could try using org.springframework.web.multipart.MultipartFile. I had issues with multiple file upload in regular WAS 7 and using MultipartFile fixed it.

Example:

 public @ResponseBody String uploadMultipleFilesHandler(@RequestPart(value="files")List<MultipartFile> attachments, HttpServletRequest request, HttpServletResponse response)

Dubas · Accepted Answer · 2018-08-06T12:48:49.897

You are using an AJAX call instead the form post submit. The enctype is not applied to the AJAX Call. Add "multipart/form-data" to the AJAX request

Depending on your JQuery version is required to add the ContentType (or is not allowed)

But if the ContentType is not sent to the controller the Spring interceptor uses the Default Resquest content type, that content type interception depends in the servlet implementation and in WAS there is a "special" one made by IBM.

For example if you are using JQuery lesst than 1.9 is required to add type: 'POST' and also method: 'POST'

You could try using only the XMLHttpRequest before using something like JQuery

HTML:

   <form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo"> 
... 

   </form>

Javacript:

var files = $("#files").prop("files");


var formData = new FormData($("#fileinfo"));
formData.append("file", files[0],"myFileName.txt");
var oReq = new XMLHttpRequest();
oReq.open("POST", "uploadMultipleFiles", true);
oReq.send(formData);

See that in the example the FormtData is created from a form that contains the enctype info

Mozilla FormData help

This problem with JQuery and the Content-Type is similar to that one how-to-send-formdata-objects-with-ajax-requests-in-jquery

Spring mvc multiple file upload while working on WebSphere Liberty

2 Answers2