JSF Primefaces Multiple file upload dynamically with/ without Ajax.

In this tutorial, we will see how to upload multiple files dynamically with the use of datatable and fileUpload tag without using multiple=”true” property. JSF Primefaces has the inbuilt facility to upload multiple files in advanced mode. Just we need add the attribute multiple=”true” in the <p:fileUpload/> tag as given below. You can also visit my earlier post on JSF Primefaces file upload example.

 

But this will not serve our purpose at all times. Consider the following situation. Suppose an user has to upload many files along with other related information. For example, when you apply for a job, you may need to upload various mark sheets/ certificates such as 10th, 10+2, Degree, PG and certificate courses. In this situation, you may need to add/remove one or more certificates dynamically along with other related details. In this scenario, the above fileupload technique may not be helpful.

                In this example, initially two rows will be displayed to accept 10th and 12th certificates which are not removable. Then you can add more documents by adding rows dynamically which can also be removed later. You can set non-removable documents by setting the flag removable to false.  Now let us design a form to accept name, institute name and upload certificates/ Mark sheets. We will do this in two ways.

1. Using p:fileUpload with advanced mode

In advanced mode, each document is uploaded individually.

2. Using p:fileUpload with simple mode

Here in simple mode, we will select multiple documents first then upload all the  files at one go by clicking on the submit button.

Technology used in the project:

JSF 2.2

Primefaces 5.2

servlet 3

Eclipse

JBoss EAP 6.1+

Additional Jars used:

commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
javax.faces-2.2.11.jar
primefaces-5.2.jar
servlet 3.1.0.jar

Project Structure:
JSF Primefaces multiple file upload

 

Now let see the complete code:

Method I) Using p:fileUpload with advanced mode:
In this method, each document is uploaded individually by clicking on the upload button. More documents can be added dynamically

1. Create Document Upload Model  (DocumentModel.java)  to capture document related information such as document name, institute name, etc..

2. JSF code (MultpleFileUpload.xhtml)

3. Create managed bean (MultipleFileUploadBean.java)

Method II) Using p:fileUpload with simple mode:

Here in simple mode, we will upload all files/ documents at one go by clicking on the form  submit button.  More documents can also be added dynamically.

1. Create Document Upload Model Simple (DocumentModelSimple.java):

 

2. JSF code (MultpleFileUpload_Simple_Mode.xhtml):

3. Create Managed Bean (MultpleFileUploadBeanSimple.java):

Result Page (success.xhtml):

web.xml:

Run the application by calling the below urls

For uploading of each file individually:

1. http://localhost:8080/JSFPrimeFacesMultipleFileUpload/faces/MultipleFileUpload.xhtml

multiple file upload advanced

Select file and click on upload for each file.

multiple file upload advanced1

The  qualifications other than not removable can  be removed by clicking on the  close button.

multiple file upload advanced2

Uploaded files can be removed by clicking on the remove document link.

Click on submit button to update the document details and to display result page.

multiple file upload advanced result

 

 

For uploading of all files at one go by form submit button:

2. http://localhost:8080/JSFPrimeFacesMultipleFileUpload/faces/MultipleFileUpload_Simple_Mode.xhtml

multiple file upload simple

Select necessary  files and add more documents dynamically if necessary. Click on submit button to upload all selected documents at one go.

multiple file upload simple1

Result Page

multiple file upload simple result

Note: Don’t Forget to enter name. You may get the below error if you forget to enter in the name field.

java.io.NotSerializableException: org.apache.catalina.core.StandardPart

 

Reference:  Primeface multiple file upload

 

You may also like

Leave a Reply

Be the First to Comment!