O projeto que vamos fazer é simples, será o cadastro de um produto com os seguintes atributos:
id, nome, preço e foto do produto.
==> Crie a base de dados ou utilize uma já existente, no meu caso, irei criar uma nova base de dados com o nome fileUpload.
==> Crie um novo projeto web com suporte a JSF, Primefaces e Hibernate (utilizando o banco criado acima).
==> Crie a estrutura de pacotes
- managedBean (controller)
- dao (persistência)
- entidades (POJO)
==> Agora vamos fazer o POJO de produtos. Dentro do pacote entidades crie uma nova classe com o nome Produto
2 | ||
5 | package entidades; | |
6 | ||
7 | /** | |
8 | * | |
9 | * @author Mara | |
10 | */ | |
11 | import javax.persistence.*; | |
12 | @Entity | |
13 | @Table(name="tb_produto") | |
14 | public class Produto{ | |
15 | @Id | |
16 | @GeneratedValue(strategy=GenerationType.AUTO) | |
17 | @Column(name="prod_id") | |
18 | private int id; | |
19 | @Column(name="prod_nome") | |
20 | private String nome; | |
21 | @Column(name="prod_preco") | |
22 | private double preco; | |
23 | @Column(name="prod_foto") | |
24 | private String foto; | |
25 | ||
// Construtor getters e setters | ||
29 |
Obs.: faça o import das anotações do pacote javax.persistence.*
==> Crie a classe HibernateUtil dentro do pacote dao.
caso tenha dúvida de como implementar a HibernateUtil consulte http://meninajava.blogspot.com/2011/11/configurar-o-hibernate-utilizando.html
==> Adicione o mapeamento da classe Produto no arquivo hibernate.cfg.xml e habilite para hibernate criar automaticamente a tabela no banco.
10 | <property name="hibernate.hbm2ddl.auto">update</property> | |
11 | <mapping class="entidades.Produto"/> | |
12 |
Agora vamos fazer a classe ProdutoDao que terá os metódos para persistir e consultar os dados do banco.
==> Dentro do pacote dao, crie uma nova classe com o nome ProdutoDao e implemente pelo menos os metódos de salvar e consultar todos os produtos, para este tutorial iremos utilizar somente estes dois.
3 | package dao; | |
4 | ||
8 | import entidades.Produto; | |
9 | import java.util.List; | |
10 | import org.hibernate.Session; | |
11 | ||
12 | public class ProdutoDao { | |
13 | public void salvar(Produto produto){ | |
14 | Session session = HibernateUtil.getSession(); | |
15 | session.beginTransaction().begin(); | |
16 | session.saveOrUpdate(produto); | |
17 | session.getTransaction().commit(); | |
18 | session.close(); | |
19 | System.out.println("Salvo com sucesso"); | |
20 | } | |
21 | ||
22 | public List<Produto> listar(){ | |
23 | Session session= HibernateUtil.getSession(); | |
24 | String sql = "SELECT p FROM Produto p"; | |
25 | return (List<Produto>) session.createQuery(sql).list(); | |
26 | } | |
27 | } |
==> Faça o download de duas bibliotecas extras:
Após baixar os arquivos, adicione as depedências ao seu projeto.
==> Configure o arquivo web.xml adicionando o filter do fileUpload.
<filter>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<filter-class> org.primefaces.webapp.filter.FileUploadFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
No post anterior fiz o método de upload do arquivo no mangedBean, para faciliar as futuras implementações desta funcionalidade, criei uma classe UploadArquivo que ficará responsável pelo upload. Assim quando o usuário pressionar o botão salvar do formulário, é armazenado o arquivo e os dados no banco.
==> No pacote managedBean crie uma nova classe com o nome UploadArquivo e implemente o código abaixo.
5 | package managedBean; | |
6 | ||
7 | import java.io.File; | |
8 | import java.io.FileOutputStream; | |
9 | import java.util.logging.Level; | |
10 | import java.util.logging.Logger; | |
11 | import javax.faces.context.ExternalContext; | |
12 | import javax.faces.context.FacesContext; | |
13 | import javax.servlet.ServletContext; | |
14 | import javax.servlet.http.HttpServletResponse; | |
15 | import org.primefaces.event.FileUploadEvent; | |
16 | ||
21 | public class UploadArquivo { | |
22 | private String diretorio; | |
23 | private String caminho; | |
24 | private byte[] arquivo; | |
25 | private String nome; | |
26 | ||
27 | public UploadArquivo() { | |
28 | } | |
46 | public String getNome() { | |
47 | return nome; | |
48 | } | |
54 | public String getRealPath() { | |
55 | ExternalContext externalContext = FacesContext.getCurrentInstance().getExternalContext(); | |
56 | HttpServletResponse response = (HttpServletResponse) externalContext.getResponse(); | |
57 | ||
58 | FacesContext aFacesContext = FacesContext.getCurrentInstance(); | |
59 | ServletContext context = (ServletContext) aFacesContext.getExternalContext().getContext(); | |
60 | ||
61 | return context.getRealPath("/"); | |
62 | } | |
63 | ||
64 | public void fileUpload(FileUploadEvent event, String type, String diretorio) { | |
65 | try { | |
66 | this.nome = new java.util.Date().getTime() + type; | |
67 | this.caminho = getRealPath() + diretorio + getNome(); | |
68 | this.arquivo = event.getFile().getContents(); | |
69 | ||
70 | File file = new File(getRealPath() + diretorio); | |
71 | file.mkdirs(); | |
72 | ||
73 | } catch (Exception ex) { | |
74 | System.out.println("Erro no upload do arquivo" + ex); | |
75 | } | |
76 | } | |
77 | ||
78 | public void gravar(){ | |
79 | ||
80 | try { | |
81 | ||
82 | FileOutputStream fos; | |
83 | fos = new FileOutputStream(this.caminho); | |
84 | fos.write(this.arquivo); | |
85 | fos.close(); | |
86 | ||
87 | } catch (Exception ex) { | |
88 | System.out.println(ex); | |
89 | } | |
90 | ||
91 | } | |
92 | } |
Linha 54 - O método getRealPath pega o diretório completo da sua aplicação no servidor.
Linha 64 - O método fileUpload irá fazer o carregamento do arquivo e prepara-lo para ser gravado.
Linha 78 - O método salvar, grava o arquivo no diretório informado.
Os arquivos serão armazenados na pasta build/web/nomediretorio do seu projeto.
==> No pacote managedBean crie uma nova classe com o nome ProdutoManagedBean e implemente o código abaixo.
5 | package managedBean; | |
6 | ||
7 | import javax.faces.bean.ManagedBean; | |
8 | import javax.faces.bean.SessionScoped; | |
9 | import entidades.Produto; | |
10 | import dao.ProdutoDao; | |
11 | import java.util.ArrayList; | |
12 | import java.util.List; | |
13 | import org.primefaces.event.FileUploadEvent; | |
14 | /** | |
15 | * | |
16 | * @author Mara | |
17 | */ | |
18 | @ManagedBean(name="produtoMB") | |
19 | @SessionScoped | |
20 | public class ProdutoManagedBean { | |
21 | private Produto produto; | |
22 | private List<Produto> listarProdutos; | |
23 | private UploadArquivo arquivo = new UploadArquivo(); | |
24 | ||
25 | public ProdutoManagedBean() { | |
26 | this.produto = new Produto(); | |
27 | this.listarProdutos = new ArrayList<Produto>(); | |
28 | } | |
29 | ||
30 | public List<Produto> getListarProdutos() { | |
31 | return new ProdutoDao().listar(); | |
32 | //return this.listarProdutos; | |
33 | } | |
34 | ||
35 | public void setListarProdutos(List<Produto> listarProdutos) { | |
36 | this.listarProdutos = listarProdutos; | |
37 | } | |
38 | ||
39 | public Produto getProduto() { | |
40 | return produto; | |
41 | } | |
42 | ||
43 | public void setProduto(Produto produto) { | |
44 | this.produto = produto; | |
45 | } | |
46 | ||
47 | public void uploadAction (FileUploadEvent event){ | |
48 | this.arquivo.fileUpload(event, ".jpg", "/image/"); | |
49 | this.produto.setFoto(this.arquivo.getNome()); | |
50 | } | |
51 | ||
52 | public void salvar(){ | |
53 | new ProdutoDao().salvar(produto); | |
54 | this.arquivo.gravar(); | |
55 | ||
56 | this.produto = new Produto(); | |
57 | this.arquivo = new UploadArquivo(); | |
58 | } | |
59 | } |
Linha 47 - Método que será chamado pela view para o upload do arquivo. O arquivo será carregado mas ainda não será salvo no diretório.
Linha 54 - Quando o usuário pressionar no botão salvar do formulário, os dados serão persistidos no banco e o arquivo será gravado no diretório.
==> Agora vamos fazer a view, no arquivo index implemente o código abaixo:
1 | <?xml version='1.0' encoding='UTF-8' ?> | |
2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
3 | <html xmlns="http://www.w3.org/1999/xhtml" | |
4 | xmlns:p="http://primefaces.prime.com.tr/ui" | |
5 | xmlns:h="http://java.sun.com/jsf/html" | |
6 | xmlns:f="http://java.sun.com/jsf/core"> | |
7 | <h:head> | |
8 | <title>File Upload</title> | |
9 | </h:head> | |
10 | <h:body> | |
11 | <h1>Inserir Produto</h1> | |
12 | <h:form> | |
13 | <h:panelGrid columns="2"> | |
14 | Nome: <h:inputText value="#{produtoMB.produto.nome}"/> | |
15 | Preço: <h:inputText value="#{produtoMB.produto.preco}"/> | |
16 | ||
17 | Foto: <p:fileUpload id="upload" update="foto" | |
18 | fileUploadListener="#{produtoMB.uploadAction}" auto="true"/> | |
19 | ||
20 | <h:commandButton action="#{produtoMB.salvar}" value="Salvar" /> | |
21 | </h:panelGrid> | |
22 | </h:form> | |
23 | ||
24 | <h2>Produtos Cadastrados</h2> | |
25 | <h:form> | |
26 | <h:dataTable var="produto" value="#{produtoMB.listarProdutos}" > | |
27 | <h:column> | |
28 | <f:facet name="header">Foto</f:facet> | |
29 | <h:graphicImage value="./image/#{produto.foto}"/> | |
30 | </h:column> | |
31 | <h:column> | |
32 | <f:facet name="header">Nome</f:facet> | |
33 | <h:outputText value="#{produto.nome}"/> | |
34 | </h:column> | |
35 | <h:column> | |
36 | <f:facet name="header">Preço</f:facet> | |
37 | <h:outputText value="#{produto.preco}"/> | |
38 | </h:column> | |
40 | </h:dataTable> | |
41 | </h:form> | |
42 | </h:body> | |
43 | </html> | |
44 |
Acesse https://github.com/MaraRegina/FileUpload, visualize o projeto completo ou faça o download para testar.
hahahahaha outro nivel, o tutorial ficou bem mais legal e ta brincando com o layout do blog, #curti
ResponderExcluir100%, foi de muita ajuda esse tutorial
ResponderExcluirOlá, consegui fazer tudo que você ensinou... tá salvando no arquivo e tudo certinho... só que estou tendo problema na hora de apresentar na tela pelo componente primefaces graphicImage... alguém sabe pq a imagem não está sendo carregada?
ResponderExcluirOlá Douglas,
ExcluirQual o erro que esta sendo exibido, é erro de componente utilizado?
Se possível, verifique se o caminho colocado para carregar a imagem corresponde com o caminho do diretório onde ela foi salva.
não é erro do componente, a imagem só não é carregada... e eu coloquei até o endereço estático pra testar e ela não é carregada... a imagem que aparece no lugar é uma que não é aquele "x" vermelho, não sei explicar direito qual é essa imagem.
ExcluirOlá, boa tarde...
ResponderExcluirseria possível utilizar este tutorial para salvar um arquivo em um banco na rede?
Se sim, poderia me dizer onde posso achar alguma informação?
Obrigado.
Sim, no exemplo do tutorial utilizei o conceito de Dao utilizando o hibernate para salvar os dados e imagem no banco.
ExcluirDa uma olhada neste tutorial tem um exemplo de conexão ao banco usando o hibernate.
http://meninajava.blogspot.com/2011/11/configurar-o-hibernate-utilizando.html
Agora que fui me atentar a sua pergunta...
Excluirse vc deseja salvar o arquivo da imagem no banco em vez de gravar somente o nome no banco e deixar a imagem salva em um diretorio. Não tenho nenhum exemplo em mãos.
Mas vou verificar
Obrigado , Me ajudou bastante
ResponderExcluiroi tudo bem..primeiramente parabens..
ResponderExcluirestou com um problema na implementaçao.
log do servidor apache:
SEVERE: null
java.lang.NullPointerException
Hibernate:
/* insert br.com.ecommerceetelj.model.Produto
*/ insert
into
produto
(id_cat, desconto_produto, descricao_produto, imagem_produto, nome_produto, preco_produto, qtd_produtodisponivel_produto, id_produto)
values
(?, ?, ?, ?, ?, ?, ?, ?)
at java.io.FileOutputStream.(FileOutputStream.java:172)
OBS: ESSE ERRO DE CIMA CAI EM
if (name == null) {
throw new NullPointerException();
}
at java.io.FileOutputStream.(FileOutputStream.java:70)
OBS: O ERRO DE CIMA CAI EM
public FileOutputStream(String name) throws FileNotFoundException {
this(name != null ? new File(name) : null, false);
}
at br.com.ecommerceetelj.bean.UploadArquivo.gravar(UploadArquivo.java:89)
at br.com.ecommerceetelj.bean.ProdutoBean.salvar(ProdutoBean.java:41)
OBS: O ERRO ACIMA CAI EM QUE ESTA DENTRO DO MEU METODO SALVAR
this.arquivo.gravar(); //chama metoda da classe UploadArquivo
O ERRO DE NULL POINTER ESTA NA LINHA 83 DO SEU TUTORIAL
83 fos = new FileOutputStream(this.caminho);
NO BANCO O MEu PRODUTO SALVA NORMALMENTE , MAIS O CAMPO IMAGEM DO BANCO FICA "Null".
DESDE JA AGRADEÇO!!
Excelente post. Parabéns!
ResponderExcluirOlá Mara!
ResponderExcluirGostaria de salvar imagens em uma pasta dentro do container ( Tomcat ) exemplo webapps\documentos\
porque ? bem o sistema poderia ser republicado e perder a pasta de documentos caso estivesse sendo gravado dentro do contexto da aplicação vc saberia me dizer como?
Há ficou muito bom! Parabens
Robson
Agradeço por compartilhar, deu tudo certo aqui.
ResponderExcluirObrigado e sucesso.
Parabéns! Grande iniciativa, continue compartilhando conhecimento.
ResponderExcluirCarlos Júnior.
Parabéns. Me ajudou muito!!
ResponderExcluirObrigado.
obrigado pelo tutorial
ResponderExcluiro meu deu esse erro to quebrando a cabeça aqui mas não consigo descobrir o porque
Cannot find component with expression ":produtoMB:produto:foto" referenced from "j_idt6:upload"
Parabéns pelo tutorial.
ResponderExcluirNa linha 68 do metodo UploadArquivo - this.arquivo = event.getFile().getContents();
Esta retornando sempre null, ai na hora de gravar da erro que o arquivo esta null, você tem ideia do que pode ser isso?
Obrigado
Bom dia!
ResponderExcluirMeu arquivo chega com null. O nome consigo pegar, mas o getContents() dá NullPointer...
Olá, muito bom o tutorial, parabéns!
ResponderExcluirEm que pasta ele deveria gravar o arquivo?
está salvando no banco, mas não exibe a imagem, parece que nao está criando o arquivo, pode me ajudar por favor?
Olá, muito bom o tutorial, parabéns!
ResponderExcluirEm que pasta ele deveria gravar o arquivo?
está salvando no banco, mas não exibe a imagem, parece que nao está criando o arquivo, pode me ajudar por favor?
Meu problema é que uso o Wildfly, e quando crio o diretorio e salvo a imagem ele restarta... ai da o erro javax.faces.application.ViewExpiredException se eu tentar fazer qualquer navegação após a exibição da imagem. O código da escrita da imagem que to usando é:
ResponderExcluirPath path = Paths.get(FacesContext.getCurrentInstance().getExternalContext().getRealPath("/").toString()+"/temp/carro");
Files.createDirectories(path);
FileOutputStream fos = new FileOutputStream(path.toRealPath() + "/" + carroSelecionado.getCodigo() + ".jpg");
fos.write(carroSelecionado.getImagem());
fos.close();
Beleza beleza, so que ñ esta listando as fotos estão na pasta build/web/image.
ResponderExcluirDai pessoal, resolvi o problema de não carregar as imagens no JSF, é só mudar o nome da pasta (diretório) de "image" para "temp", assim ele salva direto em uma pasta temporária e não cria uma pasta image.
ResponderExcluir