Olá desenvolvedores, neste tutorial implementaremos o upload de imagens com o PrimeFaces. Você verá que com a biblioteca de componentes PrimeFaces o upload de imagens é relativamente simples de ser implementado, principalmente se comparado com o JSP – JavaServer Pages e Servlets. Mas como sempre falo, é importante o entendimento de como as coisas funcionam no “braço” antes de partirmos para o framework.

Na camada de modelo (Model) da nossa aplicação o ManagedBean que controla a tela e a parte de persistência é representado pela Entidade UsuarioPessoa. Na Entidade declare um atributo imagem precedido da anotação @column do pacote javax.persistence. Defina o tipo da coluna como sendo text, que é para aceitar uma imagem em base64. Gere para o tributo os métodos Getters and Setters.

@Column(columnDefintion=“text”)
private String imagem;

MÉTODO UPLOAD()

No ManagedBean implementaremos o método upload(). Utilizaremos Ajax, assim para que o PrimeFaces possa receber a imagem que virá da tela como parâmetro, passaremos um evento do pacote org.primefaces,event, e “dentro” do evento teremos todas as informações necessárias referente a imagem.

public void upload(FileUploadEvent image){}

Assim que a imagem for recebida ela deverá ser transformada em base64, para que assim possa ser exibida na tela e também para que possamos gravá-la na base de dados usando a informação do cabeçalho. Na sequência converteremos a imagem de bytes para String para que possamos mandar para o objeto que será o responsável por exibir a imagem em tela. Desse modo, a imagem recebida como parâmetro será então convertida para byte, e tudo isso em uma única linha de código. Depois de todo esse processo a imagem será atribuída ao objeto.

CAMPO DE UPLOAD | FRONT-END

Na págima primefaces.xhtml implementaremos o campo para o upload da imagem. Logo após o campo de senha, insira o rótulo h:outputLabel, o campo de entrada para o upload da imagem será do tipo p:fileUpload. Como atributo para o campo defina o modo como sendo avançado (advanced), insira um novo rótulo que será exibido dentro do próprio campo, e especifque que o upload será automático.

Ainda no campo de entrada o atributo update receberá como identificador o id do campo de saída de dados, que é o campo responsável por mostrar a imagem na tela. Por fim invocaremos o método upload() por meio do atributo fileUploadListener.

No campo de saída de dados que exibirá para o usuário a imagem adicionada por ele, defina primeiramente o rótulo de descrição do campo. Para exibir a imagem utilizaremos o componente do JSF – JavaServer Faces, h:graphicImage, assim, especifique um id para este campo, qual será passado para o atributo update do campo de entrada. No atributo value recuperaremos a imagem que neste ponto já terá sido adicionada ao objeto. Determine ainda uma largura e altura para esta imagem.

EM POUCAS PALAVRAS

Neste tutorial de forma incrivelmente simples, rápido e direta implementamos o upload de imagens com a biblioteca de componentes PrimeFaces.