Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to detect file upload complete event in JSF2.0 using Ajax
    primarykey
    data
    text
    <p>Hope you all will be fine. Actually i want to upload image files from system to database. But i want that when user upload files then file didn't go to database directly but after selecting files .Files may save to some temporery location, so when user click on save button then i move all the images to database. I am using JSF 2.0 and PrimeFaces. I found code on someone blog. What code does is that after uploading files , it converted it to byte[] array. I save that byte Array in a list so on save button i get images from the List.</p> <p>Here is the code</p> <pre><code>private StreamedContent image; public StreamedContent getImage() { return image; } public void setImage(StreamedContent image) { this.image = image; } public String imageUpload(FileUploadEvent event) { try { // Convert file from input stream to bytes byte[] byteArray = InputStreamToByte(event.getFile().getInputstream()); /** * Add images to list so we can retrieve them when user click on save button */ boolean add = images.add(new Images(byteArray)); /** * Class.forName("org.postgresql.Driver"); String url = "jdbc:postgresql://x.x.x.x:5432/MYDB"; Connection oConnection = DriverManager.getConnection(url, "username", "password"); System.out.println("Sucessfully connected to Postgres Database"); * * byte[] bytes = bos.toByteArray(); String sql = "INSERT INTO my_table (byte_array) VALUES (?)"; statement = oConnection.prepareStatement(sql); statement.setBytes(1, bytes); statement.executeUpdate(); System.out.println("Image inserted into database!"); */ //byteArray used to store picture into database InputStream ist = new ByteArrayInputStream(byteArray); /* * StreamedContent Object used to show the picture in jsf pages. We need to convert * again bytearray to InputStream */ image = new DefaultStreamedContent(ist, "image/jpg"); FacesMessage msg = new FacesMessage("Succesful picture is uploaded."); FacesContext.getCurrentInstance().addMessage(null, msg); //we dont need to use faces-config to navigate in jsf 2 return null ; } catch (Exception e) { FacesMessage msg = new FacesMessage("Exception happen"); FacesContext.getCurrentInstance().addMessage(null, msg); e.printStackTrace(); return null; } } //end of imageUpload() </code></pre> <p>Here is my .html file</p> <pre><code>&lt;h:panelGrid width="30%" columns="3"&gt; &lt;h:outputText value="Map to upload" /&gt; &lt;p:fileUpload id="uploadFile" description="Image" update="messages" allowTypes="*.jpg;*.png;*.gif;*.jpeg;" auto="true" fileUploadListener=#{cityDetail.imageUpload} &gt; &lt;f:ajax event="????" execute="???" render="uploadedInage" /&gt; &lt;/p:fileUpload&gt; &lt;p:graphicImage id="uploadedImage" value="#{cityDetail.image}" &lt;/h:panelGrid&gt; </code></pre> <p>Now i want that when image is completely uploaded, the image is also shown to the panel grid 3rd column. For this i am trying to use Ajax. But i don't know what event should i use. So please can any one tell me the event name and also i want to ask for execute i should use "@this" ? .Also tell me that is my approach is right that to save binary image in a List so that when user click on save button then i retreive all the images and send them to database. Also using Ajax is right idea here for my purpose?</p> <p>Thanks</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload