Ajax-update p:graphicImage

628 views Asked by At

View

<h:form id="formfoto" enctype="multipart/form-data">
    <center>
        <p:outputLabel style="font-weight:bold;" value="Foto de perfil" />
    </center>
    <center>    
        <br/>
        <!--p:graphicImage  rendered="#{usuarioController.miImagen ==null}"
                         style="height:100px; width:100px;"
                         value="#{usuarioController.imagenDefecto}" 
                         cache = "false" auto="true"/-->
        <p:graphicImage  
                         id="img"
                         style="height:100px; width:100px;"
                         value="#{usuarioController.miImagen}"
                         cache="false"/>
        <p:fileUpload  mode="advanced" auto="true"
                        fileUploadListener="#{usuarioController.convertirImagenABytes}"
                       allowTypes="/(\.|\/)(jpe?g|png)$/" sizeLimit="10000000"
                       invalidFileMessage="El archivo no está en el formato válido"
                       required="true" 
                       update="@form" multiple="false" label="Subir imagen">
        </p:fileUpload> 
        <!--p:commandButton rendered="#{usuarioController.miImagen !=null}" 
                         value="Imagen por defecto" 
                         actionListener="#{usuarioController.establecerFotoPorDefecto()}"
                         process="@this"
                         >
            <p:ajax update="@this" event="click" rendered="@form" />
        </p:commandButton-->
        <p:commandButton 
                         value="Imagen por defecto" 
                         actionListener="#{usuarioController.establecerFotoPorDefecto()}"
                         process="@this,@parent,img"
                         ajax="true"
                         >
            <p:ajax immediate="true" update="@form" event="click" rendered="@form"/>

        </p:commandButton>
    </center>
    <br/>
</h:form>

Controller

public class UsuarioController implements Serializable {

    private UploadedFile file;
    private DefaultStreamedContent miImagen;
    private UploadedFile uploadedFile;

    public DefaultStreamedContent getMiImagen() {
        convertirBytesAImagen();
        /*if(miImagen==null)
            miImagen = Utilidades.getImagenPorDefecto("foto");*/
        return miImagen;
    }

    public void convertirBytesAImagen() {
        if(imagen != null)
        {
            InputStream is = new ByteArrayInputStream((byte[]) imagen);
            miImagen = new DefaultStreamedContent(is, "image/png");
        }
    }

   public void establecerFotoPorDefecto() {
        System.out.println("Hallo");
        this.file = null;
        this.miImagen = (DefaultStreamedContent) this.getImagenDefecto();
        //requestContext.execute("PF('UsuarioCreateDialog').hide()");
        //requestContext.execute("PF('UsuarioCreateDialog').show()");
        //this.imagenPorDefecto();
    }

    public StreamedContent getImagenDefecto() {
        return Utilidades.getImagenPorDefecto("foto");
    }

}

I want to able to refresh an image, when the user select an image the default image is replaced by the one he selected, in cases he want to return to the default image he can click on "imagen por defecto" but it is not refreshing on the view, does anyone know what can i do?

on the command button name "imagen por defecto" if I have process="@this,@parent,img" I get this error

multipart/form-data request not sending content-type 

but if i removed @parent it doesn't say a thing, with both the image is not refresh

0

There are 0 answers