Olá desenvolvedores, o tutorial de hoje traz a implementação do upload de imagens para o servidor. Esta é uma funcionalidade muito comum em sistemas, E não apenas o envio de imagens, mas também possibilitar a inserção de arquivos .pdf. Assim, ainda no contexto de desenvolvimento da nossa aplicação de cadastro de usuários e produtos, iremos aprender a enviar imagens e arquivos pdfs para o servidor.

CRIANDO OS CAMPOS

O primeiro passo da implementação é a criação dos campos para permitir o upload do arquivo de imagem. Implementaremos estes recursos na página cadastroUsuario.jsp. E o bacana é que o próprio HTML disponibiliza este recurso por meio do atributo type=”file” da tag <input>.

Posicionaremos os novos campos antes do botão salvar, desse modo na tabela que implementa o formulário crie uma nova linha <tr>, e consequentemente também uma nova célula <td>. Lembre-se de fechar as tags. É dentro da célula que como de costume implementaremos o <input type=”file” />. O resultado dessa implementação é exemplificado abaixo:

IMPLEMENTANDO NA SERVLET

Agora precisamos trabalhar no lado do servidor para receber o arquivo. Porém, precisaremos informar que o formulário não é mais tão somente a submissão de textos, pois teremos também a possibilidade de anexar arquivos. Assim, o formulário agora assume um caráter próprio para upload.

E para informarmos que o formulário agora possui a ‘funcionalidade” de upload será necessário inserir na tag <form> uma instrução que assinale esta caraterística.

Exceto se optarmos pela tecnologia Ajax, todo formulário que tem a capacidade de fazer upload de arquivos terá o atribulo enctype destacado na imagem acima. Dessa forma, ao informarmos o atributo, será possível enviar o formulário completo, isto é, com os textos e o anexo.

O input que recebe um atributo do tipo file, precisa de um name, porque é por meio dele que trataremos na servlet no lado do servidor o recebimento da imagem ou arquivo.

A rotina de upload no lado do servidor funcionará assim, por meio de uma API – Application Programming Interface da servlet utilizaremos uma classe própria para varrer todos os elementos HTML, e por meio de um GET a buscar o arquivo anexado.

O passo seguinte é conseguir carregar foto e gravá-la no banco de dados. E como mencionado a captura do arquivo acontece na servlet. Porém, a primeira ação, antes de escrever qualquer outra linha de código é inserir a anotação @MultipartConfig do pacote javax.servlet.annotation.MultipartConfig, que deverá ser importado.

CAPTURANDO UM ARQUIVO NA SERVLET

Precisaremos importar a API, trata-se de uma biblioteca com um conjunto de rotinas e padrões que nos permite implementar determinadas funcionalidades em uma aplicação. Neste caso a funcionalidade que a API nos emprestará é a capacidade de fazer upload.

Para você que é aluno do curso de Formação Java Web, basta fazer o download do arquivo fonte, cujo link está logo abaixo da videoaula. E dentro da pasta lib copie os arquivos .jar que iremos utilizar e os cole na pasta lib do seu projeto. Estes arquivos, commons-fileupload-1.3.2.jar e commons-io-2.5.jar é que são as API’s que possuem as classes utilitárias para a nossa implementação.

Após adicioná-las a pasta lib da sua aplicação selecione-as e clique com o botão direito do mouse>> Build Path >> Add to Build Path.

Na servlet usuario.java no doPost, quando a ação for de “salvar”, dentro do try/catch já pensando no tratamento de erros e exceções implementaremos uma condição. Esta condição irá verificar se o formulário que está sendo enviado é multipart. Assim, passaremos uma requisição com o objetivo de validar o formulário, ou seja, verificar se ele é de upload ou não.

IMPLEMENTANDO A LISTA DE ATRIBUTOS

Precisaremos então criar uma lista de diretórios a qual pegará todos os atributos do formulário e identificará entre eles o arquivo de imagem. O mesmo raciocínio se aplica na implementação do upload do arquivo .pdf. Os passos são, primeiro identificar o arquivo de imagem e somente depois alocá-lo dentro do objeto do usuário para então salvá-lo.

Assim iremos trabalhar com as APIS adicionadas, isto é, do pacote org.apache.commons.fileupload. Dessa forma instanciaremos o objeto ServletFileUpload pois se trata de uma classe que é própria para trabalhar com formulários que vem da requisição. E dentro dela precisaremos recuperar alista de todos os atributos que vem do formulário.

Mas entenda, quando clicarmos no botão salvar, os arquivos serão criados temporariamente dentro do servidor. O que temos que fazer é pegar estes arquivos temporários que estão vindo do navegador, adicioná-los a classe Java, resgatar o objeto que nos interessa e colocar no banco de dados.

E para completarmos todo o processo descrito acima precisaremos instanciar como parâmetro o objeto DiskFileItemFactory e fazer a conversão da requisição. E assim conseguiremos pegar toda a lista de atributos.

RECUPERANDO A IMAGEM

Ainda dentro da condição montaremos um foreach onde dentro do fileItem iremos recuperar a imagem em byte get(), convertendo-a em base64, isto é, transformá-la em um tipo de arquivo (dados) que será trafegado de uma lado para outro, isto é a base64.

Utilizaremos então o atributo getFieldName() para a identificação do tipo de arquivo, aqui o Fildname resgata o atributo name do input. E então utilizaremos um atributo específico para armazenar o tipo de arquivo, o getContentType(), e por fim o atributo de conversão get(), a foto é recuperado do fileItem.

Agora é só testar, se após o teste um erro de NullPointerException for apresentado, é porque no instante de atualizar o usuário, o nosso código estava verificando se o id era diferente de null ou vazio, enquanto deveria ser diferente de null e vazio. Porque se ele for diferente de null não pode passar, e antes havia esta brecha.

EM POUCAS PALAVRAS

Ressaltando que é preciso a notação @MultipartConfig​ na servlet para realizar upload. Ainda temos o que fazer até finalizarmos esta etapa do desenvolvimento, então eu fico por aqui e nós nos vemos na parte 2 deste tutorial.

ADENDO: Esta implementação funciona corretamente, o raciocino se aplica. Entretanto, a forma apresentada neste tutorial é a recomendada apenas para quando se tratar da submissão de imagens e/ou arquivos. Mas não se preocupe, algumas implementações de correção serão apresentadas nos próximos tutorias.