Multipart Request not processed by the Multipart Resolver

Question

I have recently made a few changes to my spring application by adding csrf support to it. For that I also had to change the way multipart requests were previously handled.

To make sure multipart requests get through properly I placed the org.springframework.web.multipart.support.MultipartFilter before org.springframework.web.filter.DelegatingFilterProxy in web.xml

Though it is working fine for most of the request but some requests are not receiving any request parameter at the controller level. I debugged a little and found that at this code

HttpServletRequest processedRequest = request;
    if (multipartResolver.isMultipart(processedRequest)) {
        if (logger.isDebugEnabled()) {
            logger.debug("Resolving multipart request [" + processedRequest.getRequestURI() +
                    "] with MultipartFilter");
        }
        processedRequest = multipartResolver.resolveMultipart(processedRequest);
    }
    else {
        // A regular request...
        if (logger.isDebugEnabled()) {
            logger.debug("Request [" + processedRequest.getRequestURI() + "] is not a multipart request");
        }
    }

inside the MultipartFilter is not processing my request as multipart. The request goes to the else part when the multipartResolver.isMultipart(processedRequest) check is made.

The form present inside the JSP has enctype="multipart/form-data" parameter.

<form:form modelAttribute="configVO" name="ConfigForm" method="post" enctype="multipart/form-data" action="${contextPath}/project/urlConfig">
        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
        <div class="urldivSales">
            <div class="main-subdiv-urls-msa">
                <div class="leftlable">
                    <span>Website Name</span>
                </div>
            </div>
            <div class="main-subdiv-urls-msa">
                <div class="leftlable">
                    <span>Request URL</span>
                </div>
            </div>
            <div class="main-subdiv-urls-msa">
                <div class="leftlable">
                    <span>Response URL</span>
                </div>
            </div>
            <div class="main-subdiv-urls-msa">
                <div class="leftlable">
                    <span>Image Name</span>
                </div>
            </div>
            <div class="main-subdiv-urls-msa">
                <div class="leftlable">
                    <span>Image File</span>
                </div>
            </div>

            <div class="main-subdiv-urls-msa">
                <div class="rightbox">
                    <div id='url'></div>
                </div>
            </div>
            <div class="main-subdiv-urls-msa">
                <div class="rightbox">
                    <div id='req'></div>
                </div>
            </div>
            <div class="main-subdiv-urls-msa">
                <div class="rightbox">
                    <div id='res'></div>
                </div>
            </div>
            <div class="main-subdiv-urls-msa">
                <div class="rightbox">
                    <div id='image'></div>
                </div>
            </div>
            <div class="main-subdiv-urls-msa">
                <div class="rightbox">
                    <div id='imageFile'></div>
                </div>
            </div>

            <div class="form3buttons">
                <input type="button" name="button" id="save" value="Save" onclick="validateForm();" /> 
                <input type="button" name="cancel" id="cancel" value="Cancel" />
            </div>
        </div>
    </form:form>

javascript validation method

function validateForm() {
$('#save').attr('disabled', 'disabled');
var isValid = false;
var noOfRows = '${num}';
var webSiteArray = new Array(); 
var imageNameArray = new Array();   
for(var i=0; i<noOfRows; i++) {
    var web = "web"+i;
    var req = "req"+i;
    var res = "res"+i;
    var image = "image"+i;

    var webSiteUrl =  document.getElementById(web).value;
    var imageNameValue =  document.getElementById(image).value;
    webSiteArray[i]= webSiteUrl;
    imageNameArray[i]= imageNameValue;
    var newReqUrl = document.getElementById(req).value;
    var newResUrl = document.getElementById(res).value;
    isValid = checkParm(webSiteUrl,newReqUrl,newResUrl);
    if (!isValid) {
       $('#save').removeAttr("disabled");
       break;   
    }
}

if (isValid) {
    if (checkValueisEqual(webSiteArray, imageNameArray)) {
      var contextPath = '${contextPath}'+'/project/urlConfig';
      document.forms[0].action= contextPath;
      document.forms[0].submit();
    }
}

}

filter mappings in web.xml

    <filter>
    <filter-name>MultipartFilter</filter-name>
    <filter-class>org.springframework.web.multipart.support.MultipartFilter</filter-class>
</filter>
<filter>
    <filter-name>springSecurityFilterChain</filter-name>
    <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
</filter>
<filter-mapping>
    <filter-name>MultipartFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
<filter-mapping>
    <filter-name>springSecurityFilterChain</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

The only special thing present here is that the <input type="file"> elements are added on the fly using the javascript.

Am I missing something here... One last thing to note - before adding the csrf support the code was running fine and the request parameters were received at controller end

Answer 1

Thanks M.Deinum for asking how the request is being submit.

Well I managed to pull it off by changing the way the form is being submit.

Here's the change javascript function for validation

function validateForm() {
$('#save').attr('disabled', 'disabled');
var isValid = false;
var noOfRows = '${num}';
var webSiteArray = new Array();
var imageNameArray = new Array();
for(var i=0; i<noOfRows; i++) {
    var web = "web"+i;
    var req = "req"+i;
    var res = "res"+i;
    var image = "image"+i;

    var webSiteUrl =  document.getElementById(web).value;
    var imageNameValue =  document.getElementById(image).value;
    webSiteArray[i]= webSiteUrl;
    imageNameArray[i]= imageNameValue;
    var newReqUrl = document.getElementById(req).value;
    var newResUrl = document.getElementById(res).value;
    isValid = checkParm(webSiteUrl,newReqUrl,newResUrl);
    if (!isValid) {
       $('#save').removeAttr("disabled");
       return false;
    }
}

if (isValid) {
    if (checkValueisEqual(webSiteArray, imageNameArray)) {
      return true;
    }
    return false;
} }

form changes

<form:form modelAttribute="configVO" name="ConfigForm" method="post" enctype="multipart/form-data" action="${contextPath}/project/urlConfig" onsubmit = "return validateForm();">
<input type="submit" name="button" id="save" value="Save" />