How to show a dynamic image in PrimeFaces 6.1

Question

My conditions: Java 7/JSF 2.2/PrimeFaces 6.1

I have an edit page that should allow loading an image and save it. To make things look pretty, the image just loaded should be presented before the user clicks save.

A fragment of my page is:

<h:form enctype="multipart/form-data" id="form">
    <h2 class="page-header">Image load</h2>
    <p:graphicImage id="image" required="true" value="#{bannerEditMB.image}" width="240" height="160"/>
    <p:fileUpload id="imageLoad" fileUploadListener="#{bannerEditMB.imageLoad}"
                      auto="true" mode="advanced" update="image"
                      label="#{messages['banner.image.label']}"
                      allowTypes="/(\.|\/)(jpe?g)$/"
                      invalidFileMessage="Only .jpeg e .jpg" icon="fa fa-file-image-o"/>
    <p:commandButton action="#{bannerEditMB.insert}" ajax="false" icon="fa fa-check" id="buttonAdd" rendered="#{not bannerEditMB.updateMode}"/>
    <p:commandButton action="#{bannerEditMB.update}" ajax="false" icon="fa fa-check" id="buttonUpdate" rendered="#{bannerEditMB.updateMode}"/>
    <p:commandButton action="#{bannerEditMB.cancel}" ajax="false" icon="fa fa-close" id="buttonCancel" immediate="true"/>
</h:form>

The (view scoped) backing bean is:

@ViewController
public class BannerEditMB extends AbstractEditPageBean<Banner, Long> {
    private static final long serialVersionUID = 1L;

    @Inject
    private BannerBC bc;

    private StreamedContent image = new DefaultStreamedContent();

    @Override
    public Banner handleLoad(Long id) {
        Banner bean = bc.load(id);
        imagem = new ByteArrayContent(bean.getImagem());
        return bean;
    }

    public void imageLoad(FileUploadEvent event)
                throws IOException {
        byte[] content = event.getFile().getContents();
        getBean().setImage(content);
        image = new ByteArrayContent(content);
    }

    public StreamedContent getImage() {
        return image;
    }
}

The problem is that when I click the load button, everything works, including the imageLoad() method, that correctly sets the content to the object being edited. In fact, if I click a save button, the corresponding database row is updated as expected and the just loaded image is saved in DB.

Debugging shows that the getImage() method is called twice after the image is loaded, but nothing changes on screen and the user can´t see the just loaded image.

My code is inspired in PrimeFaces 6.1 User Guide that presents a similar code.

You don't use ajax btw, so lots of things might be going on that is not visible from the code you posted. Please try to create a [mcve] — Kukeltje, Oct 16 '18 at 15:54
@Kukeltje: `@ViewControler` = `@Named @Controller @Stereotype @ViewScoped @Target(value={TYPE}) @Retention(value=RUNTIME) @Inherited` — AlexSC, Oct 16 '18 at 15:57
@Kukeltje: not clear what you said about ajax. The buttons are not the problem and they all have ajax="false". — AlexSC, Oct 16 '18 at 15:59
`@Controller` being? Some Spring annotation? And according _"The problem is that when I click the load button"_, .... _ Clicking the (invisible!) load button might be part of the problem, as might the others be (saving method is invisible, maybe you do a PRG and the assume the image still being in the bean which it might not be when you do not load it again... [mcve] please... — Kukeltje, Oct 16 '18 at 16:06
@Kukeltje: this is the Minimal and Complete example I can present (I have to work with a thirdy-party framework). However, let's try a different approach: I could make it work by loading the image from an `@ApplicationScope` bean. The one I presented, however, is `@ViewScope`. Question: is there a way of a `@ViewScope` backing bean to work to deliver the `StreamedContent` to ``? — AlexSC, Oct 16 '18 at 16:14
??? How can it be an [mcve] if there is no load button. And for your new question same things apply. Ajax or not and what you do IN the methods is of the utmost importance. (lots of 'generic' info on stackoverflow about not using ajax and using viewscoped beans. Make a [mcve] see if it works (see if the SAME viewscoped bean is used when not using ajax, see if the same one is used when using ajax). https://stackoverflow.com/questions/5494950/jsf-2-viewscope-questions — Kukeltje, Oct 16 '18 at 16:21
@Kukeltje: well, I simply removed all the buttons. The page has no more than `` and ``. No database operations are taking place here. The page just gives the user the chance to load an image file from disk (and it is!), but this image is not being shown to the user. So, the same problem continues... — AlexSC, Oct 16 '18 at 16:27
https://stackoverflow.com/questions/38817131/display-pfileupload-image-in-pgraphicimage-preview-without-saving-it and https://stackoverflow.com/questions/8207325/display-dynamic-image-from-database-with-pgraphicimage-and-streamedcontent — Kukeltje, Oct 16 '18 at 16:44
@Kukeltje: your first link has the answer! Please, answer the question and I will accept it! Thank you so much! — AlexSC, Oct 17 '18 at 10:47
Great it works. But no, the question should be marked as a duplicate then. If you'd have created a real [mcve] upfront, you'd have narrowed down the problem and might have used better search terms and found the answer directly. That is a second (or rather the first) to create a [mcve].... 'root cause analysis' when debugging — Kukeltje, Oct 17 '18 at 11:47

How to show a dynamic image in PrimeFaces 6.1

0 Answers0