JSF Primefaces

JSF Primefaces file upload functionality


Example using simple mode


Xhtml
------------------
<p:fileUpload value="#{registrationView.file}" mode="simple" auto="true" update="messages" />
 <p:growl id="messages" showDetail="true" />   
<h:commandButton value="Upload" action="#{registrationView.upload}" update="messages" ></h:commandButton>
---------------------

Here mode can be simple or advance,Update message is used to display message on success or failed.  Display the selected file….

--------------------------------
<p:outputLabel for="photo" value="Photo:"/>
<p:graphicImage id ="photo" value="#{registrationView.photo}" width="140" height="100">
<f:param name="id" value="#{registrationView.imageId}" />
</p:graphicImage>
------------------------------

Here param is used to provide the unique value to dynamic image source …. Now note that I always face problem dynamic content if you are using ViewScoped , So I am using sessionScoped.



Managed Bean :

private UploadedFile file;
private int imageId;
private StreamedContent photo;
//Add getter setter

public void upload() {System.out.println("..............fileupload............."+file.getFileName());

        //get the StreamContent

        photo =getImage();

        //Create Unique number    

        imageId = (int) new Date().getTime();
       
        //Set the output message
        FacesMessage message = new FacesMessage("Photo Uploaded Succesfully");
        FacesContext.getCurrentInstance().addMessage(null, message);
}

public StreamedContent getImage() {
       
if(childPhoto.getImageByte()==null){System.out.println("...getting default image...");
                        return new DefaultStreamedContent();
}else{System.out.println("...in else..");
                        return new DefaultStreamedContent(new ByteArrayInputStream(file.getContents()),file.getContentType(),file.getFileName());
}



Example using advance mode



Xhtml…

<p:fileUpload  value="#{registrationView.file}" mode="advanced"  update="messages, photo"
fileUploadListener="#{registrationView.handleFileUpload}"  ></p:fileUpload>

public void handleFileUpload(FileUploadEvent event) {
                photo =getImage();
                imageId = (int) new Date().getTime();
                FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
                FacesContext.getCurrentInstance().addMessage(null, message);
            }


to add the size or supported format

sizeLimit="100000"
 allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>

---------------------------------------------------------
Add the dependency in pom.xml file for file upload functionality

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.2.2</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.5</version>
</dependency>
--------------------------------------------------------------------


Using primefaces upload with spring boot


From the above steps add the variables in Bean class

private UploadedFile file;


And add the handler or upload function in Controller Class....

No comments:

Post a Comment