Upload File and send text field values using JSF and Primefaces

In my previous post, I showed how to upload a file using JSF and primefaces.
In this blog I will show how to upload a file along with text field value.
In this blog I will add a text field to the form and a field in the controller with setters and getters. So to transfer text field value to the controller, I will add an event to text field to update the managed bean on blur event.

 <h:form enctype="multipart/form-data">
<h:outputLabel value="Text Field here"/>
 <h:inputText value="#{fileUploadController.summary}">
<f:ajax event="blur"/>
</h:inputText>
<p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advanced" update="messages, dt"  auto="true"/>
 <p:dataTable id="dt" var="filename" value="#{fileUploadController.filesList}">
<p:column>
 #{filename}
 </p:column>
 </p:dataTable>
<p:growl id="messages" showDetail="true"/>
 </h:form>



@ManagedBean
@SessionScoped
public class FileUploadController implements Serializable {
    private String summary;
    private List<String> filesList;
    public List<String> getFilesList() {
        return filesList;
    }
    public void setFilesList(List<String> filesList) {
        this.filesList = filesList;
    }
    public String getSummary() {
        return summary;
    }
    public void setSummary(String summary) {
        this.summary = summary;
    }
    public FileUploadController() {
        filesList = new ArrayList<String>();
    }
    public void handleFileUpload(FileUploadEvent event) {
        FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded. Textfield: "+summary);
        FacesContext.getCurrentInstance().addMessage(null, msg);
        UploadedFile file = event.getFile();
        System.out.println(file.getContents());
        filesList.add(file.getFileName());
        System.out.println("added to files list " + filesList + " with Summary field " + summary);
    }
}

And the result:

Uploading file Using JSF Primefaces

Following steps are involved in developing upload functionality in JSF and primefaces:

1) Add the file-upload library to project and configuring web.xml file
2) Writing the File Upload handler controller and maintaining a List of files uploaded
3) Writing the xhtml page for uploading a file and Datagrid to show the list of files uploaded

Let us start:

1) Add the file-upload library to project

       and configuring web.xml file

     <filter>
        <filter-name> File Upload Filter</filter-name>
        <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
        <init-param>
            <param-name>thresholdSize</param-name>
            <param-value>51200</param-value>
        </init-param>
        <init-param>
            <param-name>uploadDirectory</param-name>
            <param-value>D:\uploadedFiles</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name> File Upload Filter</filter-name>
        <servlet-name>Faces Servlet</servlet-name>
    </filter-mapping>



2) Writing the File Upload Controller

@ManagedBean
@SessionScoped
public class FileUploadController implements Serializable {
    private List<String> filesList;
    public List<String> getFilesList() {
        return filesList;
    }
    public void setFilesList(List<String> filesList) {
        this.filesList = filesList;
    }
    public FileUploadController() {
        filesList = new ArrayList<String>();
    }
    public void handleFileUpload(FileUploadEvent event) {
        FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
        FacesContext.getCurrentInstance().addMessage(null, msg);
        UploadedFile file = event.getFile();
        filesList.add(file.getFileName());
        System.out.println("added to files list " + filesList);
    }
}

3) Writing the xhtml page for uploading a file

<p:layoutUnit position="center">
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="{fileUploadController.handleFileUpload}"
mode="advanced" update="messages, dt" auto="true"/>
<p:dataTable id="dt" var="filename" value="#{fileUploadController.filesList}">
<p:column>
#{filename}
</p:column>
</p:dataTable>
<p:growl id="messages" showDetail="true"/>
</h:form>
</p:layoutUnit>


Result

Create Login Page with JSF

Steps in creating this example:

1) Create a Template page
2) Create a JSF Web page with two fields namely username and password
2.1) Page will have a command button to check login
2.2) Action on command button (with Ajax enabled) invokes the controller to validate the login against database
2.3) Status of login is updated in the output label.

3) Creating Entity Class
4) Controller invokes named query to check the database and yields result

1) Create Template
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title><ui:insert name="title">Default Title</ui:insert></title>
        <h:outputStylesheet name="css/jsfcrud.css"/>
    </h:head>
    <h:body>
        <p>
            <ui:insert name="body">Default Body</ui:insert>
        </p>
    </h:body>
</html>


2) Create Client page with Username and password fields

<ui:composition template="template.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="title">Welcome, Please Login</ui:define>
    <ui:define name="body">
        <h:form>
           
            <h:panelGrid style="float: right; border: 1">
                <h:outputText value="Login!!" />
                <h:outputText value="Username"/>
                <h:inputText value="#{logintblController.selected.username}" />
                <h:outputText value="Password" />
                <h:inputSecret  value="#{logintblController.selected.password}" />
                <h:commandButton action="#{logintblController.validateLogin}" value="Login">
                    <f:ajax execute="@form" render="displayResponse" />
                </h:commandButton>
                <h:outputLabel id="displayResponse" value="#{logintblController.message}" />
            </h:panelGrid>
        </h:form>
    </ui:define>
</ui:composition>
3)Entity Class:

@Entity
@Table(name = "LOGINTBL")
@XmlRootElement
@NamedQueries({
    @NamedQuery(name = "Logintbl.findByUsernameAndPassword",
        query = "SELECT l FROM Logintbl l where l.username = :username "
        + "and l.password= :password")
    })
public class Logintbl implements Serializable {
    private static final long serialVersionUID = 1L;
    @Id
    @Basic(optional = false)
    @NotNull
    @Column(name = "USERID")
    private Integer userid;
    @Basic(optional = false)
    @NotNull
    @Size(min = 1, max = 20)
    @Column(name = "USERNAME")
    private String username;
    @Basic(optional = false)
    @NotNull
    @Size(min = 1, max = 25)
    @Column(name = "PASSWORD")
    private String password;
    ... setter and getter methods

4) Controller Class:

@ManagedBean(name = "logintblController")
@SessionScoped
public class LogintblController implements Serializable {
    private Logintbl current;
    @EJB
    private com.jsf.blog.example1.LogintblFacade ejbFacade;
    private String message;
    public LogintblController() {
    }
    public Logintbl getSelected() {
        if (current == null) {
            current = new Logintbl();
        }
        return current;
    }
    private LogintblFacade getFacade() {
        return ejbFacade;
    }
    public void validateLogin() {
        TypedQuery<Logintbl> query = getFacade().getEntityManager().
                createNamedQuery("Logintbl.findByUsernameAndPassword", Logintbl.class);
        query.setParameter("username", current.getUsername());
        query.setParameter("password", current.getPassword());
        try {
            Logintbl login = query.getSingleResult();
            message = "Valid User";
        } catch (Exception e) {
            message = "Invalid Login Credentials";
        }
    }
    public String getMessage() {
        return message;
    }
}

Result: