PrimeFaces' Photocam : Showing Captured Image

Question

I'm trying to replicate the example of https://www.primefaces.org/showcase/ui/multimedia/photoCam.xhtml with a simple variation.

In the example, every taken picture is saved and showed.

But I just need to show the latest one, so I've removed the list references and edited the code a little bit.

So I'm using just the graphicsImage instead of the imageSwitch, and, in the onCapture method I just overwrite the previous image.

But here's the problem.

The new image is correctly taken, I can see it by browsing to its folder, but it won't be updated in the page. It seems that it still shows the previous cached one, because it works if it's the first one (no file before this take).

Any suggestion?

EDIT: Here some code.

PrimeFaces JSF

<h:form>  

<h:panelGrid columns="3">  
    <p:photoCam widgetVar="pc" listener="#{photoCamBean.oncapture}" update="photos"/>  

    <p:commandButton type="button" value="Capture" onclick="pc.capture()"/>  

    <p:imageSwitch effect="zoom" id="photos">  
        <ui:repeat value="#{photoCamBean.photos}" var="photo">  
            <p:graphicImage value="/photocam/#{photo}.png" />  
        </ui:repeat>  
    </p:imageSwitch>  
</h:panelGrid>

MY JSF

<p:photoCam widgetVar="pc" listener="#{registerBean2.onCapture}" update="photo"/>
    <p:commandButton type="button" value="Capture" onclick="pc.capture()" update="photoPanel"/>
    <p:panel id="photoPanel">
        <p:graphicImage value="./uploaded/temp/#{registerBean2.utente.username}.png" id="photo">
            <p:effect type="pulsate" event="load" delay="500">
                <f:param name="mode" value="'show'" />
            </p:effect>
        </p:graphicImage>
    </p:panel>

PRIMEFACES BEAN

public void oncapture(CaptureEvent captureEvent) {  
    String photo = getRandomImageName();  
    this.photos.add(0,photo);  
    byte[] data = captureEvent.getData();  

    ServletContext servletContext = (ServletContext) FacesContext.getCurrentInstance().getExternalContext().getContext();  
    String newFileName = servletContext.getRealPath("") + File.separator + "photocam" + File.separator + photo + ".png";  

    FileImageOutputStream imageOutput;  
    try {  
        imageOutput = new FileImageOutputStream(new File(newFileName));  
        imageOutput.write(data, 0, data.length);  
        imageOutput.close();  
    }  
    catch(Exception e) {  
        throw new FacesException("Error in writing captured image.");  
    }  
}

MY BEAN

public void onCapture(CaptureEvent captureEvent) {
    makeAvatar(captureEvent.getData());
}

private void makeAvatar(byte[] imageData) {
    FileImageOutputStream imageOutput;
    ExternalContext extContext = FacesContext.getCurrentInstance().getExternalContext();
    File imageFile = new File(extContext.getRealPath("NEW//uploaded//temp") + "//" + utente.getUsername() + ".png");
    try {
        if (imageFile.exists()) {
            imageFile.delete();
        }
        imageFile.createNewFile();
        imageOutput = new FileImageOutputStream(imageFile);
        imageOutput.write(imageData, 0, imageData.length);
        imageOutput.close();
        FacesMessage msg = new FacesMessage("Immagine caricata correttamente.");
        FacesContext.getCurrentInstance().addMessage(null, msg);
    } catch (Exception e) {
        FacesMessage msg = new FacesMessage("Errore nel caricamento dell'immagine!");
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
}

The image is captured and updated in my temp folder, but it won't change in the page. Even a refresh won't help me. It changes only after a server restart !

EDIT : Here's my glassfish-web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE glassfish-web-app PUBLIC "-//GlassFish.org//DTD GlassFish Application Server 3.1 Servlet 3.0//EN" "http://glassfish.org/dtds/glassfish-web-app_3_0-1.dtd">
<glassfish-web-app error-url="">
    <class-loader delegate="true"/>
    <jsp-config>
         <property name="keepgenerated" value="true">
             <description>Keep a copy of the generated servlet class' java code.</description>
         </property>
         <property name="alternatedocroot_1" value="from=/uploads/* dir=/home/stefano/Documenti/UniLife" />
    </jsp-config>
 </glassfish-web-app>

Using Daniel's solution, I should have been able to browse to localhost:8080/Unilife5-war/uploads/avatar/cp99.png to show /home/stefano/Documenti/UniLife/avatar/cp99.png , or I'm getting wrong?

does this helps, http://stackoverflow.com/a/9674671/617373 ? — Daniel, Mar 24 '12 at 19:00
It seems to be the right way, but somehow it doesn't work ! I've added my glassfih-web.xml to the first post. — StepTNT, Mar 24 '12 at 19:19

score 0 · Accepted Answer · edited May 23 '17 at 12:27

0

Not familiar with glassfish to well... but for a start I'd use the simplest example given by BalusC

PrimeFace update after upload

<property name="alternatedocroot_1" value="from=/uploads/* dir=/var/webapp" />

And use http://localhost:8080/contextname/uploads/* to serve those uploaded images from by 

<h:graphicImage> the usual way.

Without other inner folders like

stefano/Documenti/UniLife/avatar/

And have you changed you're bean code ?

File imageFile = new File(extContext.getRealPath("NEW//uploaded//temp") + "//" + utente.getUsername() + ".png");

edited May 23 '17 at 12:27

Community

1
1

answered Mar 24 '12 at 20:05

Daniel

36,833
10
119
200

Thanks again, but http://localhost:8080/contextname/uploads/ gives me a 404 error. I suppose that _contextname_ is a parameter, but I've tried all the combos without succeding. I'll close this question and I'll open a new one because the subject is changed ! – StepTNT Mar 24 '12 at 20:57
i thought that contextname meant your web app name localhost:8080/yourWebAppName/uploads isn't it? – Daniel Mar 24 '12 at 21:12
That's what I thought too, but it doesn't work..I've got a file f.txt in /var/webapp and http://localhost:8080/Unilife5-war/uploads/f.txt shows a 404 error ! – StepTNT Mar 25 '12 at 12:31

PrimeFaces' Photocam : Showing Captured Image

1 Answers1