I making an application where you can upload a picture but the problem is that you cannot see the picture when it is uploaded even though the path name and reference is correct. Pictures who were in my folder already do show up on the site.
My html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Plantenverzorging</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="all" th:href="@{mystyle.css}" href="mystyle.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-custom">
<div class="container-fluid">
<a class="navbar-brand" href="#">Home</a>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div>
<h1>Plantenverzorging</h1>
<p>Welkom bij Plantenverzorging, de webapplicatie die je helpt om je planten gezond en gelukkig te
houden.</p>
</div>
</div>
</div>
<div class="row">
<div th:each="plant : ${plants}" class="col-md-4">
<a th:href="@{|/plantdetails/${plant.id}|}">
<img th:if="${plant.image != null}" th:src="@{${'/images/' + plant.image}}" src="../static/images/default-plant-image.jpg" class="img-responsive" th:alt="${plant.name}">
<img th:unless="${plant.image != null}" th:src="@{/images/default-plant-image.jpg}" class="img-responsive" th:alt="${plant.name}">
</a>
<h2 th:text="${plant.name}"></h2>
<p th:text="${plant.description}"></p>
</div>
</div>
<div class="button-container">
<a href="/add" class="btn btn-success btn-lg">Add</a>
<a class="btn btn-danger btn-lg" style="margin-left: 10px;">Delete</a>
</div>
</div>
</body>
</html>
my controller:
package be.thomasmore.eindopdracht.controllers;
import be.thomasmore.eindopdracht.models.Plant;
import be.thomasmore.eindopdracht.repositories.PlantRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
@Controller
public class AddController {
@Autowired
private PlantRepository plantRepository;
@GetMapping("/add")
public String addPlant(Model model) {
model.addAttribute("plant", new Plant());
return "add";
}
@PostMapping("/add")
public String savePlant(@ModelAttribute("plant") Plant plant,
@RequestParam("file") MultipartFile file) throws IOException {
if (!file.isEmpty()) {
String fileName = file.getOriginalFilename();
String uploadDir = "C:/Users/felix/Documents/Programmeren/Advanced Programming Techniques/eindOpdracht/eindOpdracht/src/main/resources/static/images/";
String filePath = uploadDir + fileName;
File dest = new File(filePath);
file.transferTo(dest);
plant.setImage(fileName);
}
plantRepository.save(plant);
return "redirect:/";
}
}
and my class:
package be.thomasmore.eindopdracht.models;
import jakarta.persistence.*;
import org.hibernate.annotations.GenericGenerator;
import java.util.UUID;
@Entity
public class Plant {
@Id
@GeneratedValue(generator = "uuid2")
@GenericGenerator(name = "uuid2", strategy = "org.hibernate.id.UUIDGenerator")
@Column(columnDefinition = "BINARY(16)")
private UUID id;
private String name;
private String description;
private String deadlines;
private String image;
public Plant() {
}
public UUID getId() {
return id;
}
public void setId(UUID id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getDeadlines() {
return deadlines;
}
public void setDeadlines(String deadlines) {
this.deadlines = deadlines;
}
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
}
Here is a picture of what the website looks like, as you can see the images at first seem to work fine but the images who are uploaded when teh application is running do not get recognized:
