Not to able to get fileUpload working in Liferay Portlet

[vikas_kumar_24]

Hi,
I think I tried different ways to make fileupload work in Liferay portal env.
My env:
Liferay 6.0 SP1, Mojarra 2.1.1, primefaces 3.0 M1, PortletFaces Bridge 2.0.0 RC1, Tomcat 6.0

I tried putting the p:fileupload componenet at several positions, e.g. inside a tab/tabview, in a simple form, from inside an dialog window. But m original requirement is to have the fileupload component to work from the dialog window, but when it didnt work from the dialog window, I kept on breaking my head putting it all over to try to see if it works from somewhere.

1. I also tried to debug Portletfaces Bridge/Primefaces by extending PortletFaces bridge GenericPortlet, and setting debug points in my portlet. But looks like in case of FileUpload I never see the Param Map being assigned to the BEAN.
2. Also I extended the org.primefaces.webapp.filter.FileUploadFilter with my Filter and set some debug points there, but call never comes to this Filter (NOTE: But when I convert this PORTLET app to a simple Web App (2.5), I see all the debugs from my Filter (extending org.primefaces.webapp.filter.FileUploadFilter) just fine).

NOTE: The moment I convert this APP TO NON-PORTLET app i.e. Simple Web App (2.5), all the fileUpload component work just fine.



I'm trying to attach the portlet WAR file, but finding the option to attach it. Let me post this message and I'll send the WAR file in case someone wants it to see if I got any issues in my config.

[vikas_kumar_24]

Hi All,
After doing some more digging in, here is what I'm seeing (but still not able to get File Upload working in Portal env). This time I'm trying to use a simple FileUpload along with other Form elements like text field hidden fields etc.

Summary of the test cases: When I POST form (submit form), the button's Action listener is not getting called.


Case1:
Here is a dialog box, with one "Accept" button with default ajax=true and command button (i.e. non submit button)
Summary: in this case the Accept button gets called properly (still I get file as null i.e no file coming to the server)

<p:dialog id="uploadStdAgreementDlg"
header="Upload Agreement"
widgetVar="uploadStdAgreementDlgWidget"
modal="true"
height="400"
width="300">
<h:form id="uploadStdAgreementForm" enctype="multipart/form-data" onsubmit="alert('hello')">

<p:messages showDetail="true" autoUpdate="true"/>

<h:panelGrid columns="3" cellpadding="5">
<h:outputLabel for="title" value="Title: *" />
<p:inputText value="#{agreementMgmtBean.title}"
id="title"
label="username"
required="true">
</p:inputText>
<p:message for="title" display="Title is Required." showDetail="true"/>

<h:outputLabel for="firstName" value="First Name: *" />
<p:inputText value="#{agreementMgmtBean.firstName}"
id="firstName"
label="username"
required="true">
</p:inputText>
<p:message for="firstName"/>

<h:outputLabel for="lastName" value="Last Name: *" />
<p:inputText value="#{agreementMgmtBean.lastName}"
id="lastName"
label="username"
required="true">
</p:inputText>
<p:message for="lastName"/>

<h:outputLabel for="email" value="Email: *" />
<p:inputText value="#{agreementMgmtBean.email}"
id="email"
label="username"
required="true">
</p:inputText>
<p:message for="email"/>

<h:outputLabel for="phoneNumber" value="Phone Number: " />
<p:inputText value="#{agreementMgmtBean.phoneNumber}"
id="phoneNumber"
label="username"
required="false">
</p:inputText>
<p:message for="phoneNumber"/>

<h:outputLabel for="comment" value="Comment: " />
<p:inputText value="#{agreementMgmtBean.comment}"
id="comment"
label="username"
required="false">
</p:inputText>
<p:message for="comment"/>

<p:fileUpload id="fileToUpload"
sizeLimit="30000000"
allowTypes="xls,csv"
description="Excel file" cancelLabel="Cancel" label="Upload File" value="#{agreementMgmtBean.file}" mode="simple" />

<f:facet name="footer">
<p:commandButton value="Cancel" onclick="uploadStdAgreementDlgWidget.hide()"/>
<p:commandButton value="Remote Call" onclick="document.getElementById(':uploadStdAgreementForm:myFormRC').click();"/>
<p:commandButton value="Accept"
action="#{agreementMgmtBean.updateHistoryGrid}"
process="@this, title, firstName, lastName, email, phoneNumber, comment, fileToUpload "
update=":mainForm:historyTable"/>

</f:facet>

<p:remoteCommand onstart="alert('start');" oncomplete="alert('complete');" id="myFormRC" name="myFormRC" actionListener="#{institutionBean.uploadAgreement}" process="@all"></p:remoteCommand>

</h:panelGrid>
</h:form>
</p:dialog>

with this the POST that goes is:

A0139:mainForm:uploadStdAgreementForm A0139:mainForm:uploadStdAgreementForm
A0139:mainForm:uploadStdAgreementForm:title... a
A0139:mainForm:uploadStdAgreementForm:firstName a
A0139:mainForm:uploadStdAgreementForm:lastName a
A0139:mainForm:uploadStdAgreementForm:j_idt127 A0139:mainForm:uploadStdAgreementForm:j_idt127
A0139:mainForm:uploadStdAgreementForm:email a
A0139:mainForm:uploadStdAgreementForm:phoneNumber a
A0139:mainForm:uploadStdAgreementForm:comment a
javax.faces.ViewState -6670754692966948118:7356193352597336944
javax.faces.encodedURL http://localhost:8080/web/guest/home?_1 ... ate=normal
javax.faces.partial.ajax true
javax.faces.partial.execu... A0139:mainForm:uploadStdAgreementForm:j_idt127 A0139:mainForm:uploadStdAgreementForm:title A0139:mainForm:uploadStdAgreementForm:firstName A0139:mainForm:uploadStdAgreementForm:lastName A0139:mainForm:uploadStdAgreementForm:email A0139:mainForm:uploadStdAgreementForm:phoneNumber A0139:mainForm:uploadStdAgreementForm:comment A0139:mainForm:uploadStdAgreementForm:fileToUpload
javax.faces.partial.rende... A0139:mainForm:historyTable
javax.faces.source A0139:mainForm:uploadStdAgreementForm:j_idt127

Case2:
Now I just change "Accept" button to ajax=false and type=submit. Also Pl notice the FORM encoding is enctype="multipart/form-data" ( I tried application/x-www-form-urlencoded for this test case, still Action listener doesnt get called).

Summary: Now the Accept button listener doesnt get called.


<p:commandButton value="Accept"
action="#{agreementMgmtBean.updateHistoryGrid}"
process="@this, title, firstName, lastName, email, phoneNumber, comment, fileToUpload "
update=":mainForm:historyTable" ajax="false" type="submit"/>


and now the POST data becomes:

Parts multipart/form-data
A0139:mainForm:uploadStdA... A0139:mainForm:uploadStdAgreementForm
javax.faces.encodedURL http://localhost:8080/web/guest/home?_1 ... ate=normal

A0139:mainForm:uploadStdAgreementForm A0139:mainForm:uploadStdAgreementForm
A0139:mainForm:uploadStdAgreementForm:title... a
A0139:mainForm:uploadStdAgreementForm:firstName a
A0139:mainForm:uploadStdAgreementForm:lastName a
A0139:mainForm:uploadStdAgreementForm:email a
A0139:mainForm:uploadStdAgreementForm:phoneNumber a
A0139:mainForm:uploadStdAgreementForm:comment a

javax.faces.ViewState 8773900047420487183:-5744122614120112000
Source
Content-Type: multipart/form-data; boundary=---------------------------3010629094570 Content-Length: 9358 -----------------------------3010629094570 Content-Disposition: form-data; name="A0139:mainForm:uploadStdAgreementForm" A0139:mainForm:uploadStdAgreementForm -----------------------------3010629094570 Content-Disposition: form-data; name="javax.faces.encodedURL"

rest of the POST body...

Case3:
Now based on above research, I created a sample html file with below code:

if i make form encoding to be enctype="multipart/form-data", my Action listener for the the Accept button (j_idt127) doesnt get called, but when it's normal form url encoded, the listener gets' called properly (with file still being null i.e. no file reeived on the server side even though I see it in the POST body)

<html>
<head>
<script>
var fCount = 3;
function addFileElement() {
fCount++;
var fObject = document.getElementById('fileSection');
var text = 'File:';
var tag='<input type="file" name="fileup'+fCount+'" />';
var brk=''
var o1 = document.createTextNode(text);
var o2 = document.createElement(tag);
var o3 = document.createElement(brk);
fObject.appendChild(o3);
fObject.appendChild(o1);
fObject.appendChild(o2);
fObject.appendChild(o3);
}
</script>
<title>Multiple file upload using JAX-RS</title>
</head>
<body>
<form action="http://localhost:8080/web/guest/home?_1 ... ate=normal" method="POST" enctype="multipart/form-data">
<div id="fileSection" >
File:<input type="file" name="file" />
File:<input type="file" name="file2" />
File:<input type="file" name="fileToUpload" />

<input type="hidden" name="javax.faces.ViewState" value="-6670754692966948118:7356193352597336944"/>
<input type="hidden" name="javax.faces.encodedURL" value="http://localhost:8080/web/guest/home?_1 ... ate=normal"/>
<input type="hidden" name="javax.faces.partial.ajax" value="false" />
<input type="hidden" name="javax.faces.partial.execute" value="A0139:mainForm:uploadStdAgreementForm:j_idt127 A0139:mainForm:uploadStdAgreementForm:title A0139:mainForm:uploadStdAgreementForm:firstName A0139:mainForm:uploadStdAgreementForm:lastName A0139:mainForm:uploadStdAgreementForm:email A0139:mainForm:uploadStdAgreementForm:phoneNumber A0139:mainForm:uploadStdAgreementForm:comment A0139:mainForm:uploadStdAgreementForm:fileToUpload" />
<input type="hidden" name="javax.faces.partial.render" value="A0139:mainForm:historyTable" />
<input type="hidden" name="javax.faces.source" value="A0139:mainForm:uploadStdAgreementForm:j_idt127" />


<input type="hidden" name="A0139:mainForm:uploadStdAgreementForm" value="A0139:mainForm:uploadStdAgreementForm"/>
<input type="hidden" name="A0139:mainForm:uploadStdAgreementForm:title" value="2"/>
<input type="hidden" name="A0139:mainForm:uploadStdAgreementForm:firstName" value="ff"/>
<input type="hidden" name="A0139:mainForm:uploadStdAgreementForm:lastName" value="f"/>
<input type="hidden" name="A0139:mainForm:uploadStdAgreementForm:phineNumber" value="55"/>
<input type="hidden" name="A0139:mainForm:uploadStdAgreementForm:email" value="55"/>
<input type="hidden" name="A0139:mainForm:uploadStdAgreementForm:comment" value="44"/>
<input type="hidden" name="A0139:mainForm:uploadStdAgreementForm:j_idt127" value="A0139:mainForm:uploadStdAgreementForm:j_idt127"/>

</div>
<hr>
<input type="submit" value="Upload All files" />
<input type="button" onclick="addFileElement()" value="Add File"/>
</form>
</body>
</html>

All this is in the same ENV mentioned initially in the post.

Managed Bean code:

package com.sample.eduadmin.managedbean;

import java.util.Date;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;

import org.primefaces.context.RequestContext;
import org.primefaces.model.UploadedFile;

import com.sample.eduadmin.model.HistoryData;

@ManagedBean(name = "agreementMgmtBean")
@ViewScoped
public class AgreementMgmtBean {

private String title;
private String firstName;
private String lastName;
private String phoneNumber;
private String email;
private String comment;

public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public String getPhoneNumber() {
return phoneNumber;
}
public void setPhoneNumber(String phoneNumber) {
this.phoneNumber = phoneNumber;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getComment() {
return comment;
}
public void setComment(String comment) {
this.comment = comment;
}

public void updateHistoryGrid(){
System.out.println(" updateHistoryGrid() ");

System.out.println(" title "+title );
System.out.println(" firstName "+firstName);
System.out.println(" lastName "+lastName);
System.out.println(" file "+file);

RequestContext context = RequestContext.getCurrentInstance();
FacesMessage msg = null;
boolean loggedIn = false;

// if(instId != null) {
// loggedIn = true;
// msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Welcome", instId);
// } else {
loggedIn = true;
msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Login Error", "Invalid credentials");
// }

FacesContext.getCurrentInstance().addMessage(null, msg);
context.addCallbackParam("loggedIn", loggedIn);
}

private UploadedFile file;

public UploadedFile getFile() {
return file;
}

public void setFile(UploadedFile file) {
this.file = file;
}

}

[Alex]

do you have any news to this? or did anyone managed to get fileupload running in a Liferay Portlet?

[vikas_kumar_24]

No Alex, so far not able to get this one working in Liferay. Looks like I'll end up taking jQuery's raw ajax post to restful service.
But if i get it working with restful way, i'll keep this thread updated.

Thanks,
Vikas

[Alex]

tried a little for myself, but cant manage it also to get it working...
i've used PrimeFaces 3.0.M1, Liferay 6.0 SP1 in Tomcat Bundle

I have added commons-fileupload.jar and commons-io.jar into my liferay-plugin-package.properties

my web.xml has filter like this:

Code: Select all

	<filter>
		<filter-name>PrimeFaces FileUpload Filter</filter-name>
		<filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>PrimeFaces FileUpload Filter</filter-name>
		<servlet-name>Faces Servlet</servlet-name>
	</filter-mapping>

my xhtml form has an enctype just excatly like the showcase http://www.primefaces.org/showcase-labs ... Simple.jsf or http://www.primefaces.org/showcase-labs ... Single.jsf

but neither my breakpoint in the upload method (simple mode) nor the one in handleFileUpload method (advanced mode) is getting called.


does anybody have a suggestion why this is not working?

[edykory]

Guys, just a small piece of information

If you're trying to use primefaces with Liferay, then you are using portletfaces bridge 2.0, right?
Now, in the documentation of that bridge, it's written that you need to declare the FacesServlet, although it IS NEVER CALLED as a servlet. So that's why the filter approach (which works for a normal jsf application) doesn't work for the portlet: the servlet is never called means the filter never has the chance to process the request, and the FileItems are never extracted.

I hope I understood it well. For the file upload to work, the component will have to be modified taking these aspects into account (read this as a PortletRequestWrapper needs to replace the ServletFilter).

Cheers,

Eduard Korenschi

[faces_user]

Hi,

Were anyone of you able to use FileUpload component successfully in Liferay portlet?

Thanks

[cagatay.civici]

I don't think current fileupload supports portlets as it uses Servler APIs to parse files and does not support portlet APIs.

Sounds like a good enhancement idea for future. Feel free to create an issue ticket so we'll see how many votes it gets.

[LucidKarma]

I don't think current fileupload supports portlets as it uses Servler APIs to parse files and does not support portlet APIs.

Sounds like a good enhancement idea for future. Feel free to create an issue ticket so we'll see how many votes it gets.

does primefaces support that right now ?

[edykory]

I don't think current fileupload supports portlets as it uses Servler APIs to parse files and does not support portlet APIs.

Sounds like a good enhancement idea for future. Feel free to create an issue ticket so we'll see how many votes it gets.

Hi,

The PortletBridge actually has all the logic implemented for file uploading. They even provide an inputFile component, which works well, but does full form submit and offers no features (no visual feedback, no progressbars, file size or number or contentType restrictions, multi-file uploading, nothing). But using that backend (as it is or just for reference) I think someone could extend the current flash/html5 component.

And believe me, it's a show stopper for anyone doing any serious portlet development.

Eduard