Olá , como faço para incluir uma imagem quando eu for fazer o cadastro e mostrar a imagem na parte de detalhe do produto ? Teria um curso de exemplo, utilizando o spring MVC mesmo ?
Olá , como faço para incluir uma imagem quando eu for fazer o cadastro e mostrar a imagem na parte de detalhe do produto ? Teria um curso de exemplo, utilizando o spring MVC mesmo ?
Olá Jessica, a ideia é a mesma da aula 9 do curso (https://cursos.alura.com.br/course/spring-mvc-1-criando-aplicacoes-web/task/11453). Utilize o MultipartFile para fazer o upload da imagem e para mostrar no JSP utilize a tag <img>
do html passando o caminho da imagem que deseja mostrar - para facilitar, sua classe Produto pode ter um atributo que guarda o caminho da imagem .
Espero ter ajudado e bons estudos!
Olá Thais, então tentei fazer da mesma forma que está lá , consigo gravar o caminho da imagem normalmente no BD porém a imagem não está dentro da pasta arquivos-sumario e eu não consigo puxar a imagem por não estar nessa pasta ... então estou um pouco perdida nessa parte ... como faço para ter a imagem na pasta para eu puxar ela no img ? Obrigada
Pode ser algum detalhe na sua classe FileSaver
que tenha deixado passar, Você poderia postar o código de suas classes (ProdutosController e FileServer) e o form.jsp
do produto aqui?
Olá Thais segue a classe FileSaver
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;
@Component
public class FileSaver {
@Autowired
private HttpServletRequest request;
public String write(String baseFolder, MultipartFile file) {
try {
String realPath = request.getServletContext().getRealPath("/" + baseFolder);
String path = realPath + "/" + file.getOriginalFilename();
file.transferTo(new File(path));
return baseFolder + "/" + file.getOriginalFilename();
} catch (Exception e) {
throw new RuntimeException(e);
}
}
}
A proxima classe é a do meu projeto que chama CadastroEvento
<div class="container">
<h1>Abrir Evento</h1>
<p>Preencha as informações do evento a ser cadastrado.</p>
<div class="row">
<div class="col my-3">
<form:form action="/saleTicket/eventos" method="post" commandName="evento" enctype="multipart/form-data">
<div class="form-row">
<div class="form-group col-md-8">
<label for="inputEvento">Nome do Evento:</label> <input
type="text" class="form-control" name="nomeEvento"
id="inputEvento" placeholder="Evento">
<form:errors path="nomeEvento"
style="color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 2px 6px; border-radius: .25rem; margin-top: 5px; display: block; font-size: 14px;" />
</div>
<div class="form-group col-md-4">
<label for="inputData">Data do Evento:</label> <input
type="date" class="form-control" name="data" id="inputData"
placeholder="Data">
<form:errors path="data"
style="color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 2px 6px; border-radius: .25rem; margin-top: 5px; display: block; font-size: 14px;" />
</div>
</div>
<div class="form-group">
<label for="inputPalestrante">Nome do Palestrante:</label> <input
type="text" class="form-control" id="inputPalestrante"
placeholder="Palestrante" name="palestrante">
<form:errors path="palestrante"
style="color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 2px 6px; border-radius: .25rem; margin-top: 5px; display: block; font-size: 14px;" />
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputHorario">Horário do Evento:</label> <input
type="time" class="form-control" name="horaEvento"
id="inputHorario" placeholder="Horário">
</div>
<div class="form-group col-md-8">
<label for="inputLocal">Local do Evento:</label> <input
type="text" class="form-control" name="localEvento"
id="inputLocal" placeholder="Local">
</div>
</div>
<div class="form-group col-md-6 arquivo">
<span id='file-name' class="text-truncate">Foto</span>
<label class="float-right labelFile" for='formControlFile'>Selecionar Arquivo</label>
<input type="file" name="sumario" class="form-control-file" id="formControlFile">
</div>
<p class="preencha float-right mt-5">Preencha todos os campos corretamente.</p>
<hr>
<button type="submit" class="btn btn-azul float-right">Abrir
Evento</button>
</form:form>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
Uma dúvida mesmo eu gravando no BD a imagem o funcionamento é local, quando eu colocar o projeto na web funcionará normalmente ?
Olá Thais conseguir resolver o meu problema aqui, era só o caminho que estava puxando errado. Poderia me esclarecer uma coisa ? Quando faço o cadastro de produtos e quero dar update nos dados dele como fica a imagem ? Porque se eu não colocar nenhuma imagem ela grava no meu BD vazia , como arrumo isso ? se eu editar para atulizar os dados e coloco uma imagem nova funciona ... agora se não coloco imagem nenhuma ela não salva a anterior segue o update.jsp
<form:form action="/saleTicket/eventos/update/${eventos.id_evento}" method="post" enctype="multipart/form-data">
${erroAtualizado }
<div class="form-row">
<div class="form-group col-md-8">
<label for="inputEvento">Nome do Evento:</label>
<input type="text" class="form-control" name="nomeEvento" id="inputEvento" value="${eventos.nomeEvento}">
</div>
<div class="form-group col-md-4">
<label for="inputData">Data do Evento:</label>
<input type="date" class="form-control" name="data" id="inputData" value="${eventos.data}">
</div>
</div>
<div class="form-group">
<label for="inputPalestrante">Nome do Palestrante:</label>
<input type="text" class="form-control" id="inputPalestrante" value="${eventos.palestrante}" name="palestrante">
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputHorario">Horário do Evento:</label>
<input type="time" class="form-control" name="horaEvento" id="inputHorario" value="${eventos.horaEvento}">
</div>
<div class="form-group col-md-8">
<label for="inputLocal">Local do Evento:</label>
<input type="text" class="form-control" name="localEvento" id="inputLocal" value="${eventos.localEvento}">
</div>
<div class="form-group">
<input type="hidden" name="excluir" class="form-control"
value="${eventos.excluir}" />
</div>
</div>
<div class="form-group col-md-6 arquivo">
<span id='file-name' class="text-truncate">${eventos.sumarioPath}</span>
<label class="float-right labelFile" for='formControlFile'>Selecionar Arquivo</label>
<input name="sumario" value="${eventos.sumarioPath}" type="file" class="form-control-file" id="formControlFile">
</div>
<p class="preencha float-right mt-5">Preencha todos os campos
corretamente.</p>
<hr>
<button type="submit" class="btn btn-azul float-right">Atualizar
Evento</button>
</form:form>
Obrigada
Olá Jessica, que bom que conseguiu resolver sua primeira dúvida! Sobre o update, o que você pode fazer é colocar uma imagem padrão na sua aplicação e caso o usuário não envie uma imagem (ou seja, seja vazia) você atribui a imagem padrão a ele.
Consegui Thaís obrigada
Boa, Jessica! :)