JSF 2.2 - fileupload does not work with Ajax. Form appears to have incorrect enctype (only via AJAX)

Question

Trying to implement the JSF 2.2 example I have the following code:

<h:form prependId="false" enctype="multipart/form-data">

    <!-- Now it's the AJAX file upload component -->
    <h:inputFile id="fileUpload" value="#{someBean.file}" >
        <f:ajax />
    </h:inputFile>

    <h:commandButton value="Upload" />
</h:form>

According to some JSF 2.2 this should work but in my case it is giving me the following error:

the request doesn't contain a multipart/form-data or multipart/mixed stream, content type header is application/x-www-form-urlencoded;charset=UTF-8

Looking into the request although I have set my form enctype correctly, the partial request submits:

Content-type:application/x-www-form-urlencoded;charset=UTF-8 Faces-Request:partial/ajax

Note that web.xml also was modified to:

<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
    <multipart-config>
        <location>c:\dotmp</location>
        <max-file-size>20848820</max-file-size>
        <max-request-size>418018841</max-request-size>
        <file-size-threshold>1048576</file-size-threshold>
    </multipart-config>
</servlet>

I am using Mojarra 2.2.0-m15 but tried this with earlier versions as well. Does anyone know any useful info about this issue, which I assume is a bug?

Answer 1

I'm not sure what's going on as I haven't seen this before. The following construct works for me when using the today's Mojarra 2.2.1 snapshot which you can download from the "implementation jar" link mentioned in What's new in JSF 2.2?

<h:form enctype="multipart/form-data">
    <h:inputFile value="#{bean.file}" required="true">
        <f:ajax listener="#{bean.handleFileUpload}" render="@form" />
    </h:inputFile>
    <h:messages />
</h:form>

with

private Part file;

public void handleFileUpload(AjaxBehaviorEvent event) {
    System.out.println("file size: " + file.getSize());
    System.out.println("file type: " + file.getContentType());
    System.out.println("file info: " + file.getHeader("Content-Disposition"));
}

// ...

I recommend to give the newer Mojarra version a try. Apparently there was a bug in an older Mojarra version which failed to create a proper multipart/form-data request using the <iframe> hack which ultimately caused this error. The mXX versions are beta versions anyway and should not be relied upon for production. This error could theoretically also have been browser-specific, but it works currently fine for me in Chrome 26, Firefox 20 and IE 10.

The only issue which I'm seeing is that the hidden <iframe> is still visible in Chrome and Firefox as below:

It appears that they're forgotten to set frameborder attribute to 0 in the generated <iframe>. I've reported issue 2861 about that.

Answer 2

I fixed the JavaScript of JSF (and other parts) to enable Multipart requests with and without AJAX on servlet standard 2.

The JSF 2.2 file upload works beginning with servlet version 3. Furthermore the responsible transport layer called "IFrame Transport" was not in release state. So I added a transparent Multipart request, completed the transport layer and put all together to an upload tag:

<e:inputFile id="file" value="#{fileUpload.file}" filename="#{fileUpload.filename}"
    mimeType="#{fileUpload.mimeType}"/>

The Tag works together with AJAX, with traditional page submits and with servlet standard 2 / 3. Not the nicest implementation, but it's working almost transparent. The solution is accessible at http://www.intersult.com/wiki/page/JSF%20Ext#section-JSF+Ext-FileUpload (Please use translation).

Comments welcomed.

Answer 3

I had the same problem with PrimeFaces <p:fileUpload mode="simple" using javax.faces-2.2.6.jar. The problem disappeared when I disabled ajax from my <h:commandButton. In my case it was OK to refresh the whole page.