Question

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.

Here is the 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()

Here is my .html file

<h:panelGrid width="30%" columns="3">

    <h:outputText value="Map to upload" />
    <p:fileUpload id="uploadFile"
                  description="Image"
                  update="messages"
                  allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
                  auto="true"
                  fileUploadListener=#{cityDetail.imageUpload} >

        <f:ajax event="????" execute="???" render="uploadedInage" />

    </p:fileUpload>

    <p:graphicImage id="uploadedImage"
                    value="#{cityDetail.image}"


</h:panelGrid>

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?

Thanks

Answer 1

so when user click on save button then i move all the images to database

Then just implement that accordingly?

<p:commandButton value="save" action="#{cityDetail.save}" />

with

public void save() {
    // Move all images to database.
}