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-2.4,commons-io-2.4-javadoc,commons-io-2.4-sources,commons-io-2.4-tests,commons-io-2.4-test-sources,commons-fileupload-1.3,commons-fileupload-1.3-javadoc,commons-fileupload-1.3-sources,commons-fileupload-1.3-tests,commons-fileupload-1.3-test-sources
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>