Olá, estamos de volta com a sequência de tutoriais implementando o upload de imagens. Na parte 1 dessa sequência e no tutorial de correção apresentamos duas formas de trabalharmos com o upload de imagens.

Entretanto a primeira forma sem os devidos ajustes nos impende a submissão do formulário completo, visto que não contempla os arquivos de textos, mas é o ideal para trabalharmos tão somente com imagens. O método número dois possibilita o envido do formulário com seus campos de textos e upload. Agora iremos carregar a imagem, que deverá ser a foto do usuário na tabela e apresenta-la na tela.

IMPLEMENTANDO NO DAO

Para tornar possível exibir a imagem em miniatura do usuário será necessário carregar os atributos Fotobase64 e contettype na classe de conexão DaoUsuario(). Assim, no método listar por meio do objeto beanCursoJsp iremos “setar” ambos os atributos e pegar o retorno, isto é, a foto e o tipo.

Falando especificamente da imagem em base64, observe que no nosso banco de dados não estão sendo gravadas a codificação mostrada abaixo, somente todo aquele código que vem depois do trecho em questão.

O nosso banco grava todo aquele código que é a imagem em si, e o contentType que recebe o tipo de arquivo, se é imagem/png ou apliccation/pdf.

CONCATENANDO A STRING BASE64

O que iremos fazer é, no momento de dar um retorno para a tela, concatenar a informação que já temos com o “data”. E se não fizermos a concatenação entre o tipo de dados e data, o navegador não interpretará e a imagem não será exibida corretamente. E se o que iremos fazer é mostrar a imagem na tela, podemos então utilizar um atributo apenas para este fim.

Temos, na página cadastroUsuario.jsp um formulário responsável por gravar os dados e depois este formulário é carregado na tabela, onde tem-se uma lista de usuários sendo carregada e um objeto invocando o atributo. E por sua vez, estes atributos que estão sendo mostrados foram declarados na classe BeanCursoJsp.java, responsável pelas informações do usuário, e onde iremos declarar um atributo para armazenar a foto. E não geraremos o set, neste caso precisaremos apenas do get.

private String tempFotoUser;

Assim é dentro do objeto, ou seja, no escopo do get que iremos montar a base64, isto é, fazer a concatenação do data com o que o banco de dados está gravando.

Esta concatenação será montada em tempo de execução, e então este atributo será chamado na tabela de usuários, na página cadastroUsuario.jsp. Posicionaremos o campo logo abaixo do login. E no endereço da imagem passaremos a base64 utilizando o JSP.

TESTANDO A APLICAÇÃO

Inicie a aplicação no servidor carregue novos dados e salve. Após salvar observe na listagem dos dados abaixo que a imagem já está sendo exibida. E ao contrário das imagens que salvamos anteriormente, agora as imagens estão sendo carregadas completamente.

Clique com o botão direito do mouse sobre a imagem e posteriormente sobre a opção “copiar endereço da imagem”. Cole o endereço copiado no navegador para exibir a imagem em tamanho real, mas atente-se principalmente para a URL que mostra a concatenação da base64 que fizemos. Não se preocupe, nos próximos tutoriais implementaremos o download da imagem.

Opcionalmente, mas extremamente recomendado você pode colocar no input responsável por exibir a imagem os atributos alt=”Imagem user” e title=”ImagemUser”, assim se a imagem não for carregada adequadamente, um texto alternativo será exibido.

EM POUCAS PALAVRAS

E podemos ainda implementar uma condição que faça exibir uma imagem padrão quando por algum motivo a imagem não for exibida. A sua criatividade e vontade de aprender é o limite. No tutorial de hoje implementamos uma forma de exibir na tabela a imagem inserida pelo usuário por meio do upload. E para exibi-la foi preciso apenas concatenar as informações da base64 e armazená-las em uma variável. Eu fico por aqui e nos vemos no próximo tutorial.