Primeface uploadFile + graphicImage: Upload image and display without refresh

Asked

Viewed 1,345 times

1

I’m starting to program on + . A long time ago I worked with JSP(java 1.4) and I’m kind of lost.

I’m looking to upload an image and have it displayed below.

xhtml images.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:jsf="http://xmlns.jcp.org/jsf"
  xmlns:p="http://primefaces.org/ui"
  xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
  xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>

</h:head>
    <h:form enctype="multipart/form-data">
    <p:fileUpload fileUploadListener="#{fileUploadView.upload}" mode="advanced"
                 update="messages Graf" auto="true" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />

<p:growl id="messages" showDetail="true" />
<p:graphicImage id="Graf" value="#{fileUploadView.imagem}" rendered="#{fileUploadView.imagem != null} "/>
</h:form>

</html>

Fileuploadview.java

package br.com.testes;

import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.io.InputStream;
import javax.ejb.Stateful;
import javax.inject.Named;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import lombok.Getter;
import lombok.Setter;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.DefaultStreamedContent;
import org.primefaces.model.UploadedFile;
import org.primefaces.model.StreamedContent;

@Named(value = "fileUploadView")
@ManagedBean
@Stateful
public class FileUploadView {

    private UploadedFile file;

    public UploadedFile getFile() {
        return file;
    }

    public void setFile(UploadedFile file) {
        this.file = file;
    }

    @Setter
    private static StreamedContent imagem;

    public StreamedContent getImagem() throws IOException {
        return imagem;
    }

    /**
     * Creates a new instance of FileUploadView
     */
    public FileUploadView() {
        imagem = null;
    }

    public void upload(FileUploadEvent evt) {
        file = evt.getFile();

        try {
            if (file != null) {
                System.out.println(file.getContentType()+"\n\n"+file.getFileName());
                InputStream is = file.getInputstream();
                imagem = new DefaultStreamedContent(is, file.getContentType());
                FacesMessage message = new FacesMessage("Succesful", file.getFileName() + " is uploaded.");
                FacesContext.getCurrentInstance().addMessage(null, message);
            }
        } catch (Exception e) {
            FacesMessage message = new FacesMessage(e.getMessage());
                FacesContext.getCurrentInstance().addMessage(null, message);
        }
    }

    public void upload() {
        if (file != null) {
            FacesMessage message = new FacesMessage("Succesful", file.getFileName() + " is uploaded.");
            FacesContext.getCurrentInstance().addMessage(null, message);
            imagem = new DefaultStreamedContent(new ByteArrayInputStream(file.getContents()), file.getContentType());
        }
    }

    public void handleFileUpload(FileUploadEvent event) {
        FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
        FacesContext.getCurrentInstance().addMessage(null, message);
    }

}

Trying to upload does not display the image.

java primefaces jsf-2.2 file-upload xhtml

1 answer

-1

I in Html use jquery to do this

in my HTML code I use:

<div id="dvPreview">
<img src="" id="imagem"
</div>
<input type="file" id="upload" />

In the Javascript code on the page itself

<script>    
$(function () {
    $("#upload").change(function () {
        $("#dvPreview").html("");
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
        if (regex.test($(this).val().toLowerCase())) {
            if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                $("#dvPreview").show();
                $("#imagem").src = $(this).val();
            }
            else {
                if (typeof (FileReader) != "undefined") {
                    $("#dvPreview").show();

                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#imagem").attr("src", e.target.result);
                    }
                    reader.readAsDataURL($(this)[0].files[0]);
                } 
            }
        } else {
    $("#upload").val("")
            alert("Formato de arquivo invalido.");

        }
    });
    });
</script>

I hope it helps you :)

  • The problem is that I will need the image denrto class/object, so it would not help me do by JS

  • Yeah, that answer doesn’t understand the kind of problem.

Browser other questions tagged java primefaces jsf-2.2 file-upload xhtml

You are not signed in. Login or sign up in order to post.