Image Uploading and Rendering from Database in JSF(Primefaces)

Add.xhtml  

    <h:form id="add-form" enctype="multipart/form-data">
             <p:growl id="messages" showDetail="true"/>
             <h:panelGrid columns="2">
                  <p:outputLabel for="choose" value="Choose Image :" />
                  <p:fileUpload id="choose" validator="#{productController.validateFile}" multiple="false" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"  value="#{productController.file}" required="true" mode="simple"/>
                <p:commandButton value="Submit" ajax="false" update="messages" id="save-btn" actionListener="#{productController.saveProduct}"/>
             </h:panelGrid>
    </h:form>

 
Here is Managed Bean Code:

    @ManagedBean
  @RequestScoped
    public class ProductController implements Serializable{
    private ProductBean bean;
    @ManagedProperty(value = "#{ProductService}")
    private ProductService productService;
    private StreamedContent content;
    private UploadedFile file;
    public StreamedContent getContent() {
    FacesContext context = FacesContext.getCurrentInstance();
   
    if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
               return new DefaultStreamedContent();
           }
    else{
    String imageId = context.getExternalContext().getRequestParameterMap().get("id");
    Product product = getProductService().getProductById(Integer.parseInt(imageId));
    return new DefaultStreamedContent(new ByteArrayInputStream(product.getProductImage()));
    }
    }
    public ProductController() {
    bean = new ProductBean();
    }
   
    public void setContent(StreamedContent content) {
    this.content = content;
    }
    public UploadedFile getFile() {
    return file;
    }
    
    public void setFile(UploadedFile file) {
    this.file = file;
    }
    public void saveProduct(){
    try{
    Product product = new Product();
    product.setProductImage(getFile().getContents());
   
    getProductService().saveProduct(product);
    file = null;
   
    }
    catch(Exception ex){
    ex.printStackTrace();
    }
    }
    public void validateFile(FacesContext ctx,
                UIComponent comp,
                Object value) {
    List<FacesMessage> msgs = new ArrayList<FacesMessage>();
    UploadedFile file = (UploadedFile)value;
    int fileByte = file.getContents().length;
    if(fileByte > 15360){
    msgs.add(new FacesMessage("Too big must be at most 15KB"));
    }
    if (!(file.getContentType().startsWith("image"))) {
       msgs.add(new FacesMessage("not an Image file"));
    }
    if (!msgs.isEmpty()) {
       throw new ValidatorException(msgs);
    }
    }
    }

Add these lines of code in web.xml


    <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>

And Dont Forget to add following jar files in lib folder.

commons-io-X.X  and commons-fileupload-X.X, recommended most recent version.

View.xhtml

    <h:form id="ShowProducts">
    <p:dataTable rowsPerPageTemplate="3,6,9" var="products" paginator="true" rows="3" emptyMessage="Catalog is empty" value="#{productController.bean.products}">
    <p:column headerText="Product Name">
    <p:graphicImage width="80" height="80" value="#{productController.content}">
    <f:param name="id" value="#{products.productId}" />
      </p:graphicImage>
    #{products.productName}
    </p:column>
    </p:dataTable>
    </h:form>