ReRender an uploaded image (a4j:mediaOutput)

Question

I would like to display an uploaded image via ajax (in a a4j:mediaOuput tag) after uploading but I can't rerender the a4j:mediaOutput tag:

<h:form enctype="multipart/form-data"> <a4j:jsFunction name="refreshPic" reRender="picHolder" /> <p:fileUpload mode="advanced" fileLimit="1" multiple="false" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" auto="true" fileUploadListener="#{createSopController.fileChanged}" oncomplete="refreshPic()" /> <a4j:outputPanel id="picHolder"> <a4j:mediaOutput id="pic" element="img" cacheable="false" createContent="#{sessionImageBean.paint}" value="#{createSopBean.imageId}" mimeType="#{createSopBean.sop.mimeType}" width="672" height="1005"/> </a4j:outputPanel> </h:form>

Any ideas?

Answer 1

a4j:mediaOutput requires a varying request parameter, in order not to be cached. for this purpose, i prefer to use up-to-date timestamp from an application scoped managed bean. this is just like overcoming browser cache for js and css files, by appending timestamp parameter to their url.

btw, you don't need to to anything with this parameter when rendering the image.

<a4j:mediaOutput ... >
    <f:param value="#{appMB.timeStamp}" name="time" />
</a4j:mediaOutput>