File upload doesn't work with AJAX in PrimeFaces 4.0/JSF 2.2.x - javax.servlet.ServletException: The request content-type is not a multipart/form-data
As Kai rightfully pointed out in his answer on the current question, the problem is caused by the NativeFileUploadDecoder as used by FileUploadRenderer not checking whether the request is a multipart/form-data request or not. This will cause trouble when the component is present in a form on which a "regular" ajax request is being submitted. The CommonsFileUploadDecoder checks that correctly and that's why it works correctly in JSF 2.1 which didn't have a native file upload parser yet.
His solution of workarounding this with a custom renderer is in the right direction, however the approach is quite clumsy. There's in this particular case absolutely no need of copypasting the whole class consisting more than 200 lines just to add a few more lines. Instead, just extend exactly that class and override exactly the method with an if check before delegating to the super as follows:
package com.example;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import org.primefaces.component.fileupload.FileUploadRenderer;
public class MyFileUploadRenderer extends FileUploadRenderer {
@Override
public void decode(FacesContext context, UIComponent component) {
if (context.getExternalContext().getRequestContentType().toLowerCase().startsWith("multipart/")) {
super.decode(context, component);
}
}
}
That's it (keep that <renderer-kit> entry in faces-config.xml though). There's no point of continuing the decode if the request isn't a multipart request. The file parts wouldn't be available anyway (and there's also no point of casting back to javax.servlet.* API when the same functionality is readily available via ExternalContext).
I had the same issue. It seems to be more related to the <p:commandButton> than the <p:fileUpload> component, since it works with an <h:commandButton> (even with ajax).
You could try:
<h:commandButton id="btnSubmit" actionListener="#{testManagedBean.insert}" value="Save">
<f:ajax execute="@all" render="@form"/>
</h:commandButton>
I cannot tell you why or how it works, but it fixed the issue for me. The downside of course is, that you have to do the styling by yourself, at least until the Primefaces guys fix this issue.
EDIT:
After digging in the sources and doing some debugging if figured out that there are actually two requests made (I tried in <p:wizard/>). The first one is the multipart/form-data one which actually does the file upload. It fires the fileUploadEvent in the Bean. I the wizards next button is pressed another form with enctype application/www-urlencoded is submitted. This causes the exception. Conclusion is, that unlike what I wrote in the comment suppressing the exception is a valid solution. This can even be done in a way that does not include changing the Primefaces.jar which is handy if the guys fix the issue in a future version.
So here is what needs to be done:
- Create a new class
com.yourpackage.fileupload.FileUploadRenderer Copy and paste the following code inside your new class:
package com.yourpackage.fileupload.fileupload; import java.io.IOException; import javax.faces.FacesException; import javax.faces.component.UIComponent; import javax.faces.context.FacesContext; import javax.faces.context.ResponseWriter; import javax.servlet.http.HttpServletRequest; import org.primefaces.component.fileupload.CommonsFileUploadDecoder; import org.primefaces.component.fileupload.FileUpload; import org.primefaces.component.fileupload.NativeFileUploadDecoder; import org.primefaces.config.ConfigContainer; import org.primefaces.context.RequestContext; import org.primefaces.expression.SearchExpressionFacade; import org.primefaces.renderkit.CoreRenderer; import org.primefaces.util.HTML; import org.primefaces.util.WidgetBuilder; public class FileUploadRenderer extends CoreRenderer { @Override public void decode(FacesContext context, UIComponent component) { FileUpload fileUpload = (FileUpload) component; if (!fileUpload.isDisabled()) { ConfigContainer cc = RequestContext.getCurrentInstance().getApplicationContext().getConfig(); String uploader = cc.getUploader(); boolean isAtLeastJSF22 = cc.isAtLeastJSF22(); if (uploader.equals("auto")) { if (isAtLeastJSF22) { if (isMultiPartRequest(context)) { NativeFileUploadDecoder.decode(context, fileUpload); } } else { CommonsFileUploadDecoder.decode(context, fileUpload); } } else if (uploader.equals("native")) { if (!isAtLeastJSF22) { throw new FacesException("native uploader requires at least a JSF 2.2 runtime"); } NativeFileUploadDecoder.decode(context, fileUpload); } else if (uploader.equals("commons")) { CommonsFileUploadDecoder.decode(context, fileUpload); } } } @Override public void encodeEnd(FacesContext context, UIComponent component) throws IOException { FileUpload fileUpload = (FileUpload) component; encodeMarkup(context, fileUpload); if (fileUpload.getMode().equals("advanced")) { encodeScript(context, fileUpload); } } protected void encodeScript(FacesContext context, FileUpload fileUpload) throws IOException { String clientId = fileUpload.getClientId(context); String update = fileUpload.getUpdate(); String process = fileUpload.getProcess(); WidgetBuilder wb = getWidgetBuilder(context); wb.initWithDomReady("FileUpload", fileUpload.resolveWidgetVar(), clientId, "fileupload"); wb.attr("auto", fileUpload.isAuto(), false) .attr("dnd", fileUpload.isDragDropSupport(), true) .attr("update", SearchExpressionFacade.resolveComponentsForClient(context, fileUpload, update), null) .attr("process", SearchExpressionFacade.resolveComponentsForClient(context, fileUpload, process), null) .attr("maxFileSize", fileUpload.getSizeLimit(), Long.MAX_VALUE) .attr("fileLimit", fileUpload.getFileLimit(), Integer.MAX_VALUE) .attr("invalidFileMessage", fileUpload.getInvalidFileMessage(), null) .attr("invalidSizeMessage", fileUpload.getInvalidSizeMessage(), null) .attr("fileLimitMessage", fileUpload.getFileLimitMessage(), null) .attr("messageTemplate", fileUpload.getMessageTemplate(), null) .attr("previewWidth", fileUpload.getPreviewWidth(), 80) .attr("disabled", fileUpload.isDisabled(), false) .callback("onstart", "function()", fileUpload.getOnstart()) .callback("onerror", "function()", fileUpload.getOnerror()) .callback("oncomplete", "function()", fileUpload.getOncomplete()); if (fileUpload.getAllowTypes() != null) { wb.append(",allowTypes:").append(fileUpload.getAllowTypes()); } wb.finish(); } protected void encodeMarkup(FacesContext context, FileUpload fileUpload) throws IOException { if (fileUpload.getMode().equals("simple")) { encodeSimpleMarkup(context, fileUpload); } else { encodeAdvancedMarkup(context, fileUpload); } } protected void encodeAdvancedMarkup(FacesContext context, FileUpload fileUpload) throws IOException { ResponseWriter writer = context.getResponseWriter(); String clientId = fileUpload.getClientId(context); String style = fileUpload.getStyle(); String styleClass = fileUpload.getStyleClass(); styleClass = styleClass == null ? FileUpload.CONTAINER_CLASS : FileUpload.CONTAINER_CLASS + " " + styleClass; boolean disabled = fileUpload.isDisabled(); writer.startElement("div", fileUpload); writer.writeAttribute("id", clientId, "id"); writer.writeAttribute("class", styleClass, styleClass); if (style != null) { writer.writeAttribute("style", style, "style"); } //buttonbar writer.startElement("div", fileUpload); writer.writeAttribute("class", FileUpload.BUTTON_BAR_CLASS, null); //choose button encodeChooseButton(context, fileUpload, disabled); if (!fileUpload.isAuto()) { encodeButton(context, fileUpload.getUploadLabel(), FileUpload.UPLOAD_BUTTON_CLASS, "ui-icon-arrowreturnthick-1-n"); encodeButton(context, fileUpload.getCancelLabel(), FileUpload.CANCEL_BUTTON_CLASS, "ui-icon-cancel"); } writer.endElement("div"); //content writer.startElement("div", null); writer.writeAttribute("class", FileUpload.CONTENT_CLASS, null); writer.startElement("table", null); writer.writeAttribute("class", FileUpload.FILES_CLASS, null); writer.startElement("tbody", null); writer.endElement("tbody"); writer.endElement("table"); writer.endElement("div"); writer.endElement("div"); } protected void encodeSimpleMarkup(FacesContext context, FileUpload fileUpload) throws IOException { encodeInputField(context, fileUpload, fileUpload.getClientId(context)); } protected void encodeChooseButton(FacesContext context, FileUpload fileUpload, boolean disabled) throws IOException { ResponseWriter writer = context.getResponseWriter(); String clientId = fileUpload.getClientId(context); String cssClass = HTML.BUTTON_TEXT_ICON_LEFT_BUTTON_CLASS + " " + FileUpload.CHOOSE_BUTTON_CLASS; if (disabled) { cssClass += " ui-state-disabled"; } writer.startElement("span", null); writer.writeAttribute("class", cssClass, null); //button icon writer.startElement("span", null); writer.writeAttribute("class", HTML.BUTTON_LEFT_ICON_CLASS + " ui-icon-plusthick", null); writer.endElement("span"); //text writer.startElement("span", null); writer.writeAttribute("class", HTML.BUTTON_TEXT_CLASS, null); writer.writeText(fileUpload.getLabel(), "value"); writer.endElement("span"); if (!disabled) { encodeInputField(context, fileUpload, clientId + "_input"); } writer.endElement("span"); } protected void encodeInputField(FacesContext context, FileUpload fileUpload, String clientId) throws IOException { ResponseWriter writer = context.getResponseWriter(); writer.startElement("input", null); writer.writeAttribute("type", "file", null); writer.writeAttribute("id", clientId, null); writer.writeAttribute("name", clientId, null); if (fileUpload.isMultiple()) { writer.writeAttribute("multiple", "multiple", null); } if (fileUpload.getStyle() != null) { writer.writeAttribute("style", fileUpload.getStyle(), "style"); } if (fileUpload.getStyleClass() != null) { writer.writeAttribute("class", fileUpload.getStyleClass(), "styleClass"); } if (fileUpload.isDisabled()) { writer.writeAttribute("disabled", "disabled", "disabled"); } writer.endElement("input"); } protected void encodeButton(FacesContext context, String label, String styleClass, String icon) throws IOException { ResponseWriter writer = context.getResponseWriter(); String cssClass = HTML.BUTTON_TEXT_ICON_LEFT_BUTTON_CLASS + " ui-state-disabled " + styleClass; writer.startElement("button", null); writer.writeAttribute("type", "button", null); writer.writeAttribute("class", cssClass, null); writer.writeAttribute("disabled", "disabled", null); //button icon String iconClass = HTML.BUTTON_LEFT_ICON_CLASS; writer.startElement("span", null); writer.writeAttribute("class", iconClass + " " + icon, null); writer.endElement("span"); //text writer.startElement("span", null); writer.writeAttribute("class", HTML.BUTTON_TEXT_CLASS, null); writer.writeText(label, "value"); writer.endElement("span"); writer.endElement("button"); } private boolean isMultiPartRequest(FacesContext context) { if (context == null) { return false; } return ((HttpServletRequest) context.getExternalContext().getRequest()).getContentType().startsWith("multipart"); } }Add the following lines at the bottom of your
faces-config.xml:<render-kit> <renderer> <component-family>org.primefaces.component</component-family> <renderer-type>org.primefaces.component.FileUploadRenderer</renderer-type> <renderer-class>com.yourpackage.fileupload.FileUploadRenderer</renderer-class> </renderer> </render-kit>You're ready to go!
What have we done? We created our own FileUploadRenderer which checks if the contentType is really multipart/form-data using the method isMultiPartRequest(). Only if this returns true the rest of the code is executed. In any other case nothing will happen which means that no exception will be thrown. If Primefaces fixes this issue you just need to remove the lines from your faces-config.xml to use their class.
Let me know if that works for you!
EDIT
This code checks wether or not the given request is of type multipart/form-data. If it is not the execution is stopped. The original Primefaces code would continue anyway. As I mentioned above if you upload a file inside a Primefaces component there are actually two requests made:
- The Ajax-FileUpload using the
<p:fileUpload/>(enctype:multipart/form-data) - The Ajax action in the
<p:editRow/>or<p:wizard/>(enctype:application/www-form-urlencoded)
The first one is handled by the renderer while the second one causes the exception in the original code since the renderer tries to handle something which it is not capable of. With the changes made in the code only multipart/form-data forms are handled by the renderer so no exceptions occur. IMO it is clearly a bug in the sources of Primefaces. The code differences is just the method private boolean isMultiPartRequest(FacesContext context) and its one occurrence in the code. Glad I could help you!
Although this is old and already answered, i wanted to share something, just in case you missed it: PrimeFaces 4+ now has a context paramter, which you can use (in web.xml) to manually choose which uploader should be used (native-servlet3 or commons). You can use this to force commons-uploader like this:
<context-param>
<param-name>primefaces.UPLOADER</param-name>
<param-value>commons</param-value>
</context-param>
(Of course you still need FileUploadFilter as described above and in the guide). See PrimeFaces User's Guide for more information.