Update image after attaching to fileupload

Question

When I insert the image by dialog using the fileupload the graphicImage does not update the image after I click on attach. The photo only appears on graphicImage after I save the form. I wanted the photo to already appear after I clicked on attach dialog.

<ui:define name="conteudo">

    <p:layout>
        <p:layoutUnit position="west" collapsible="true" id="treemenu"
            resizable="true" header="Cadastros" gutter="0">
            <ui:include src="_tree_cadastro.xhtml" />
        </p:layoutUnit>


        <p:layoutUnit position="center" collapsible="true" id="conteudo"
            gutter="0">

            <div class="padrao_margem">
                <h:form id="form">

                    <h:inputHidden id="idPessoa" value="#{pessoaBean.pessoa.idPessoa}" />
                    <h:inputHidden id="codRef" value="#{pessoaBean.pessoa.codRef}" />
                    <h:inputHidden id="nomeFoto" value="#{pessoaBean.pessoa.nomeFoto}" />

                    <div class="padrao_titulo">Cadastro de Pessoas</div>

                    <div class="padrao_botoes_form">
                        <p:outputPanel layout="block">

                            <p:commandButton value="Voltar" immediate="true" ajax="false"
                                icon="ui-icon-arrow-1-w" action="#{pessoaBean.cancelar}" />

                            <p:commandButton value="Salvar" action="#{pessoaBean.salvar}"
                                ajax="false" icon="ui-icon-disk" />

                        </p:outputPanel>
                    </div>

                    <p:tabView>
                        <p:tab title="Dados Pessoais">
                            <p:fieldset style="margin-bottom:20px">

                                <h:panelGrid columns="2">
                                    <p:panelGrid styleClass="noGridBorder">
                                        <p:row>
                                            <p:column>
                                                <p:graphicImage url="#{pessoaBean.retornaFoto()}"
                                                    height="120" width="100" />


                                                <p:dialog header="Enviar foto" width="750" height="250"
                                                    widgetVar="dlgfoto" resizable="false" modal="true"
                                                    appendTo="@(body)" closable="true" draggable="false"
                                                    closeOnEscape="true">

                                                    <h:form id="formFoto" enctype="multipart/form-data">
                                                        <p:fileUpload fileUploadListener="#{pessoaBean.upload}"
                                                            fileLimit="1" update=":form:nomeFoto" required="true"
                                                            requiredMessage="O campo Foto é obrigatório."
                                                            fileLimitMessage="Excedido Limite de arquivos"
                                                            cancelLabel="Cancelar" label="Procurar"
                                                            uploadLabel="Anexar"
                                                            invalidSizeMessage="Tamanho excedido(200kb)"
                                                            sizeLimit="204800"
                                                            invalidFileMessage="Somente arquivos .jpg, .png ou .gif"
                                                            allowTypes="/(\.|\/)(gif|jpe?g|png)$/" mode="advanced"
                                                            skinSimple="true" />
                                                        <!-- <p:commandButton value="Enviar" ajax="false" /> -->
                                                    </h:form>
                                                </p:dialog>
                                            </p:column>
                                        </p:row>

                                        <p:row>
                                            <p:column style="text-align: center">
                                                <p:commandButton icon="ui-icon-person" value="Foto"
                                                    onclick="PF('dlgfoto').show();" for="foto" />
                                            </p:column>
                                        </p:row>

                                        <br />
                                    </p:panelGrid>

                                </h:panelGrid>
                            </p:fieldset>
                        </p:tab>


                    </p:tabView>

                </h:form>
            </div>

        </p:layoutUnit>
    </p:layout>


</ui:define>

public String retornaFoto() {
    HttpServletRequest url = (HttpServletRequest) FacesContext.getCurrentInstance().getExternalContext()
            .getRequest();
    String urlBase = url.getRequestURL().toString().substring(0,
            (url.getRequestURL().toString().length() - url.getServletPath().length()));

    if (this.pessoa != null) {
        if (this.pessoa.getNomeFoto() == null || this.pessoa.getNomeFoto().equals("")) {
            return urlBase + "/resources/img/avatar_100.png";
        } else {
            return urlBase + "/fotos/" + this.pessoa.getNomeFoto();

        }
    }

    return urlBase + "/resources/img/avatar_100.png";
}

public void upload(FileUploadEvent event) {
    try {
        ExternalContext externalContext = FacesContext.getCurrentInstance().getExternalContext();
        @SuppressWarnings("unused")
        HttpServletResponse response = (HttpServletResponse) externalContext.getResponse();

        FacesContext aFacesContext = FacesContext.getCurrentInstance();
        ServletContext context = (ServletContext) aFacesContext.getExternalContext().getContext();

        String realPath = context.getRealPath("/");


        File file = new File(realPath + "/fotos//");
        if (!file.exists()) {

            file.mkdirs();
        }

        byte[] arquivo = event.getFile().getContents();
        String caminho = realPath + "\\fotos\\" + event.getFile().getFileName();
        String nomeFoto = event.getFile().getFileName();
        // esse trecho grava o arquivo no diretório
        FileOutputStream fos = new FileOutputStream(caminho);
        fos.write(arquivo);
        fos.close();

        this.pessoa.setNomeFoto(nomeFoto);


        MetodosUtil.executarJavaScript("PF('dlgfoto').hide();");
    } catch (Exception ex) {
        System.out.println("Erro no upload de imagem" + ex);
    }

}