Primefaces File Upload Multiple working like single - jsf

I have a fileUpload in multiple mode:
<p:fileUpload fileUploadListener="#{perosnaDesapBean.handleFileUpload}" mode="advanced" dragDropSupport="false"
multiple="true" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
label="Elegir Imágenes"
cancelLabel="Cancelar"
uploadLabel="Subir"
update="messages"
/>
And in my managed bean had the handle:
public void handleFileUpload(FileUploadEvent event) {
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Succesful", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, message);
}
For the first uploaded file show the message, but for the second one nothing. It runs the event handler once.
My web.xml file:
<context-param>
<param-name>primefaces.UPLOADER</param-name>
<param-value>auto</param-value>
</context-param>
<filter>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
</filter>
My managed bean is #ConversationScoped, may be why? I'm using PF: 5.1
Thanks.

Example: PF 5.1, JSF 2.2, commons-io-2.4, commons-fileupload-1.3.1
Class definition:
#ManagedBean ( name="fileUploadManagedBean" )
#SessionScoped
public class FileUploadManagedBean implements Serializable {
private static final long serialVersionUID = 1L;
private UploadedFile fileImage;
public UploadedFile getFileImage() {
return fileImage;
}
public void setFileImage(UploadedFile fileImage) {
this.fileImage = fileImage;
}
public void handleFileUpload(FileUploadEvent event) {
FacesMessage msg = new FacesMessage("Succesful", event.getFile()
.getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
XHTML definition:
<h:form enctype="multipart/form-data" >
<p:growl id="msg" />
<p:fileUpload value="#{fileUploadManagedBean.fileImage}"
invalidSizeMessage="Size off"
invalidFileMessage="Type off"
fileLimitMessage="Only 4 files"
mode="advanced" multiple="true" fileLimit="4" sizeLimit="1951200"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
fileUploadListener="#{fileUploadManagedBean.handleFileUpload}"
update="msg" />
</h:form>
WEB.XML definition
<context-param>
<param-name>primefaces.UPLOADER</param-name>
<param-value>commons</param-value>
</context-param>
<filter>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<filter-class>
org.primefaces.webapp.filter.FileUploadFilter
</filter-class>
<init-param>
<param-name>thresholdSize</param-name>
<param-value>1951200</param-value>
</init-param>
<init-param>
<param-name>uploadDirectory</param-name>
<param-value>/tmpImages</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>

Related

Multiple file upload using jsf

I am using JSF 2.2 framework using primefaces, but I am unable to create multiple files import .I have tried using the lots of option but it doesn't work
public static Collection getAllParts(Part part) throws ServletException, IOException {
HttpServletRequest request = (HttpServletRequest) FacesContext.getCurrentInstance().getExternalContext().getRequest();
return request.getParts().stream().filter(p -> part.getName().equals(p.getName())).collect(Collectors.toList());
}
public void submit() throws ServletException, IOException {
for (Part part : getAllParts(file)) {
String fileName = part.getSubmittedFileName();
InputStream fileContent = part.getInputStream();
// ...
//
// E.g. https://stackoverflow.com/q/14211843/157882
}
}
But it is still not working.Moreover HttpServletRequest request is returning null value. Please help me in resolving this issue
Use jsf and Primefaces instead of the servlet request.
e.g.
In your web.xml
<context-param>
<param-name>primefaces.UPLOADER</param-name>
<param-value>auto|native|commons</param-value>
</context-param>
<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>
In your pom
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
In your .xhtml :
<h:form id="uploadingForm" enctype="multipart/form-data">
<p:fileUpload listener="#{yourbean.handleFileUpload}"
mode="advanced" dragDropSupport="false"
multiple="true" update="messages" sizeLimit="100000" fileLimit="3" />
</h:form>
In your bean:
private List<UploadedFile> uploadedFiles;
public void handleFileUpload(FileUploadEvent event) {
uploadedFiles.add(event.getFile());
}
now can you process your files on the uploadedFiles list
you can even check the documentation

The fileuploaded is always null when using p:fileUploaded

When using fileUpload from primefaces5.0, the file uploaded is always null.
The View :
<h:form enctype="multipart/form-data" style="text-align:center;">
<p:fileUpload value="#{noteController.fileName}" mode="simple" skinSimple="true" />
<p:commandButton class="btn btn-success" value="Upload file" ajax="false" actionListener="#{noteController.upload}" />
</h:form>
ManagedBean :
#ManagedBean( name = "noteController")
#ApplicationScoped
public class NoteController {
private UploadedFile fileName;
public String upload(){
if(fileName != null) {
return "success";
}
return "error";
}
public UploadedFile getFileName() {
return fileName;
}
public void setFileName(UploadedFile fileName) {
this.fileName = fileName;
}
}
And the web.xml, I add this :
<context-param>
<param-name>primefaces.UPLOADER</param-name>
<param-value>commons</param-value>
</context-param>
<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>
As result : fileName is always null, and the view is not redirected to the error's view. The view remains at the same page when the action upload is trigged.
Remove skinSimple="true", this worked for me.
Anyhow, still trying to find the reason...

PrimeFaces simple fileUpload: NullPointerException

I try to make a simple fileupload so:
<h:form enctype="multipart/form-data">
<p:fileUpload value="#{catastrofes.file}" mode="simple"></p:fileUpload>
<p:separator/>
<h:commandButton value="Dummy Action" action="#{catastrofes.dummyAction}" ajax="false"></h:commandButton>
</h:form>
But when I submit, get file = null and raise NullPointerException, here a similar question, but the answer don't work for me, any ideas?
Here my managed bean:
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import org.primefaces.model.UploadedFile;
#ManagedBean(name="catastrofes")
#RequestScoped
public class CatastrofesBean {
private UploadedFile file;
public String dummyAction() {
System.out.println("Uploaded File Name Is :: " + file.getFileName() + " :: Uploaded File Size :: " + file.getSize());
return "";
}
public UploadedFile getFile() {
return file;
}
public void setFile(UploadedFile file) {
this.file = file;
}
}
And my web.xml:
<context-param>
<param-name>primefaces.UPLOADER</param-name>
<param-value>auto|native|commons</param-value>
</context-param>
<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>
Thanks!
According to primefaces_user_guide
auto: This is the default mode and PrimeFaces tries to detect the best method by checking the
runtime environment, if JSF runtime is at least 2.2 native uploader is selected, otherwise commons.
native: Native mode uses servlet 3.x Part API to upload the files and if JSF runtime is less than 2.2
and exception is being thrown.
commons: This option chooses commons fileupload regardless of the environment, advantage of
this option is that it works even on a Servlet 2.5 environment.
You should choose only one option not paste all those three options.
If you have commons-fileupload library in your project, I suggest you to choose commons.
in web.xml
<context-param>
<param-name>primefaces.UPLOADER</param-name>
<param-value>commons</param-value>
</context-param>
xhtml
<h:form enctype="multipart/form-data">
<p:growl id="messages" showDetail="true" />
<p:fileUpload value="#{fileUploadView.file}" mode="simple" />
<br /> <br />
<h:commandButton value="Dummy Action"
action="#{fileUploadView.upload}">
</h:commandButton>
</h:form>
managedbean
#ManagedBean
#RequestScoped
public class FileUploadView {
private UploadedFile file;
public UploadedFile getFile() {
return file;
}
public void setFile(UploadedFile file) {
this.file = file;
}
public void upload() {
System.out.println("Uploaded File Name Is :: " +
file.getFileName() +
" :: Uploaded File Size :: " + file.getSize());
if(file != null) {
FacesMessage message = new FacesMessage("Succesful", file.getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, message);
}
}
}

Primefaces file uploaded not setting file object in backing bean

I am using the Primefaces 5.0 file uploaded with the Apache Commons Uploader. The control appears on the web page and I can select a file, but when I click a button to action it the file object in the controller has not been set.
The web page:
<h:form id="master">
<p:panelGrid columns="2">
<p:fileUpload value="#{controller.file}" mode="simple"/>
<p:commandButton value="Upload"
ajax="false" actionListener="# {controller.uploadFile}" />
</p:panelGrid>
Controller:
#ManagedBean
#ViewScoped
public class Controller implements Serializable {
private UploadedFile file;
public UploadedFile getFile() {
return file;
}
public void setFile(UploadedFile file) {
this.file = file;
}
public void uploadFile() {
if(file != null) {
//Doesn't get here because file is null
}
}
web.xml
<context-param>
<param-name>primefaces.UPLOADER</param-name>
<param-value>common</param-value>
</context-param>
<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>
I tried setting the File Uploader to "auto" in the web.xml, but then I get multi-part exceptions which I couldn't resolve.
You miss to use enctype="multipart/form-data" in <h:form>. Change as below
<h:form enctype="multipart/form-data">
...
</h:form>
What does enctype='multipart/form-data' mean?

p:fileUpload does not set uploaded file in backing bean [duplicate]

This question already has answers here:
How to use PrimeFaces p:fileUpload? Listener method is never invoked or UploadedFile is null / throws an error / not usable
(11 answers)
Closed 7 years ago.
I am facing a problem with <p:fileUpload> of PrimeFaces. I created a Facelet page to upload a file as below:
<h:form id="welcomeForm">
<p:fileUpload value="#{fileUploadController.uploadedFile}" mode="simple" />
<h:commandButton value="Submit" action="#{fileUploadController.submit}" />
<h:message for="welcomeForm" />
</h:form>
And a backing bean as below:
public class FileUploadController {
private UploadedFile uploadedFile;
public FileUploadController() {
}
public UploadedFile getUploadedFile() {
return uploadedFile;
}
public void setUploadedFile(UploadedFile uploadedFile) {
this.uploadedFile = uploadedFile;
}
public void submit() {
// Get information you from the uploaded file
System.out.println("Uploaded file name : " + uploadedFile);
}
}
When I click the Submit button, the method submit() is called but it the result is as below :
INFO: Uploaded file name : null
How is this caused and how can I solve it?
Please read the <p:fileUpload> chapter of the PrimeFaces User Guide.
Getting started with FileUpload
First thing to do is to configure the fileupload filter which parses the multipart request. FileUpload filter should map to Faces Servlet.
<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>
Simple File Upload
Simple file upload mode works in legacy mode with a file input whose value should be an
UploadedFile instance.
<h:form enctype="multipart/form-data">
<p:fileUpload value="#{fileBean.file}" mode="simple" />
<p:commandButton value="Submit" ajax="false"/>
</h:form>
import org.primefaces.model.UploadedFile;
public class FileBean {
private UploadedFile file;
//getter-setter
}
Please note the enctype="multipart/form-data" attribute of the form. This is mandatory for HTML in order to be able to send files to the server. The filter is mandatory for JSF in order to extract the data from multipart/form-data requests. Without either of them, either the command action won't be invoked, or all properties will be null.
I think that the problem is that the simple upload doesn't support ajax.
you should add ajax="false":
<h:form id="welcomeForm">
<p:fileUpload value="#{fileUploadController.uploadedFile}" mode="simple" />
<h:commandButton value="Submit" action="#{fileUploadController.submit}" ajax="false" />
<h:message for="welcomeForm" />
</h:form>
Or use the primefaces autouploader.
I have the same issue, I have solved it by adding
<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>
like BalusC said.
but adding this :
<!-- JSF mapping -->
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- Map these files with JSF -->
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
Because by default in J2EE 6 this part is optional JSF 2.0 Servlet activates automatically when the WEB-INF/faces-config.xml descriptor is present.
But it necessary to active correctly PrimeFaces Filter
Jboss 6.1.0.Final / PrimeFaces 3.0.RC2
Try This:
<h:form id="welcomeForm" enctype="multipart/form-data">
<p:fileUpload value="#{fileUploadController.uploadedFile}" mode="simple" />
<h:commandButton value="Submit" action="#{fileUploadController.submit}" />
<h:message for="welcomeForm" />
</h:form>
(enctype="multipart/form-data" is very important for file upload.)
And:
public class FileUploadController {
private UploadedFile uploadedFile;
public FileUploadController() {
}
public UploadedFile getUploadedFile() {
return uploadedFile;
}
public void setUploadedFile(UploadedFile uploadedFile) {
this.uploadedFile = uploadedFile;
}
public void submit() {
// Get information you from the uploaded file
System.out.println("Uploaded file name : " + uploadedFile.getFileName());
}
}
uploadedFile.getFileName() used to get the file name.
I had the same issue and just a very little THING saved me:
I did all the internet says about the prime faces and file upload thing
After applying the needed filter mappings and needed dependencies, I saw that dispacher information must also be added to the filter mappings:
<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>FacesServlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
</filter-mapping>
<servlet>
<servlet-name>FacesServlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>FacesServlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>FacesServlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
Maybe this very little configuration can save lives just like mine, good luck!

Resources