show UploadedFile content from Primeface's p:fileUpload in same form without refresh

Question

I'm trying to implement an ImageUpload and show the uploaded Image immediately on same page using DynamicImage. My Problem is, I can't force the p:graphicImage content be refreshed and show the uploaded image after uploading it.

@ManagedBean(name = "myformbean")
@Controller
@ViewScoped
@Data
public class MyFormBean implements Serializable {

    private StreamedContent listImage = null;

    public StreamedContent getListImage() {
        if (listImage == null) {
            try {
                listImage = new DefaultStreamedContent(new FileInputStream("E:/t.jpg"), "image/png"); // load a dummy image
            }
            catch (FileNotFoundException e) {
                e.printStackTrace();
            }
        }

        return listImage;
    }

    public void handleFileUpload(FileUploadEvent event) {
        final UploadedFile uploadedFile = event.getFile();

        listImage = new DefaultStreamedContent(new ByteArrayInputStream(uploadedFile.getContents()), "image/png");
    }
}

And in .xhtml file:

<p:graphicImage value="#{myformbean.listImage}" />

Solution

if your upload does the work

all you need to do is to set id to <p:graphicImage like this

<p:graphicImage id="refreshMe" value="#{myformbean.listImage}" />

and in your <p:fileUpload set the update attribute to point to the image

like this

<p:fileUpload  auto="true"  ... update="refreshMe" ....

Comments

[stuckedoverflow]

@Daniel I cannot make it work. This is my graphicImage <h:graphicImage id = "giOne" value="/DisplayImage?imgId=1" width="100" height="160" cache="false"></h:graphicImage> I use servlet "DisplayImage" instead of backing bean. Because the image is not stored on DB but on filesystem. So I dont use StreamedContent but standard Input and Output Stream