In this tutorial, I will show you how to upload Image with Spring Boot, Thymeleaf and Bootstrap. We also write a page that can display the uploaded Images.
Related Posts:
– Spring Boot Thymeleaf CRUD example
– Spring Boot Thymeleaf Pagination and Sorting example
– Spring Boot Thymeleaf Multiple Files upload
– Spring Boot @ControllerAdvice & @ExceptionHandler example
– @RestControllerAdvice example in Spring Boot
– Spring Boot Unit Test for JPA Repository
– Spring Boot Unit Test for Rest Controller
– Deploy Spring Boot App on AWS – Elastic Beanstalk
Fullstack:
– Angular + Spring Boot: File upload example
– React + Spring Boot: File upload example
Associations:
– Spring Boot One To One example with JPA, Hibernate
– Spring Boot One To Many example with JPA, Hibernate
– Spring Boot Many to Many example with JPA, Hibernate
Contents
- Overview
- Technology
- Project Structure
- Create & Setup Spring Boot project
- Create Service for File Storage
- Define Data Model
- Create MVC Controller
- Setup the Template
- Implement Image Upload function
- Display List of Images
- Configure Multipart File
- Handle Image Upload Exception
- Initialize Storage
- Run the Project
- Conclusion
- Source Code
- Further Reading
Spring Boot Image Upload Overview
Our Spring Boot Image Upload and Display example with Thymeleaf will have following features:
- uploading Image to a static folder in the Server
- downloading Image from server with the link
- display list of Images
– Here is the Image Upload Form:
– If the Image File exceeds specific maximum size:
– This is the static folder that stores all uploaded images:
– Display list of uploaded images with download links:
In this tutorial, I don’t explain way to delete File. If you want to know that, just visit:
Spring Boot Delete File example with Thymeleaf
Or adding Pagination with following tutorial:
Spring Boot Thymeleaf Pagination example
Technology
- Java 8
- Spring Boot 2.7 (with Spring Web MVC, Thymeleaf)
- Maven 3.6.1
- Bootstrap 4
- jQuery 3.6.1
Project Structure
Let me explain it briefly.
– ImageInfo
contains information of the uploaded image.
– FilesStorageService
helps us to initialize storage, save new image, load image, display list of images, delete images.
– ImageController
uses FilesStorageService
to handle image upload/download and template requests.
– FileUploadExceptionAdvice
handles exception when the controller processes image upload.
– template
stores HTML template files for the project.
– application.properties contains configuration for Servlet Multipart.
– uploads is the static folder for storing images.
– pom.xml for Spring Boot dependency.
Create & Setup Spring Boot Image Upload project
Use Spring web tool or your development tool (Spring Tool Suite, Eclipse, Intellij) to create a Spring Boot project.
Then open pom.xml and add dependencies for Spring Web, Thymeleaf, Bootstrap, Jquery:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.6.2</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.6.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
</dependency>
Create Service for File Storage
First we need an interface that will be autowired in the Controller.
In service folder, create FilesStorageService
interface like following code:
service/FilesStorageService.java
package com.bezkoder.spring.thymeleaf.image.upload.service;
import java.nio.file.Path;
import java.util.stream.Stream;
import org.springframework.core.io.Resource;
import org.springframework.web.multipart.MultipartFile;
public interface FilesStorageService {
public void init();
public void save(MultipartFile file);
public Resource load(String filename);
public void deleteAll();
public Stream<Path> loadAll();
}
Now we create implementation of the interface.
service/FilesStorageServiceImpl.java
package com.bezkoder.spring.thymeleaf.image.upload.service;
import java.io.IOException;
import java.net.MalformedURLException;
import java.nio.file.FileAlreadyExistsException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.stream.Stream;
import org.springframework.core.io.Resource;
import org.springframework.core.io.UrlResource;
import org.springframework.stereotype.Service;
import org.springframework.util.FileSystemUtils;
import org.springframework.web.multipart.MultipartFile;
@Service
public class FilesStorageServiceImpl implements FilesStorageService {
private final Path root = Paths.get("./uploads");
@Override
public void init() {
try {
Files.createDirectories(root);
} catch (IOException e) {
throw new RuntimeException("Could not initialize folder for upload!");
}
}
@Override
public void save(MultipartFile file) {
try {
Files.copy(file.getInputStream(), this.root.resolve(file.getOriginalFilename()));
} catch (Exception e) {
if (e instanceof FileAlreadyExistsException) {
throw new RuntimeException("A file of that name already exists.");
}
throw new RuntimeException(e.getMessage());
}
}
@Override
public Resource load(String filename) {
try {
Path file = root.resolve(filename);
Resource resource = new UrlResource(file.toUri());
if (resource.exists() || resource.isReadable()) {
return resource;
} else {
throw new RuntimeException("Could not read the file!");
}
} catch (MalformedURLException e) {
throw new RuntimeException("Error: " + e.getMessage());
}
}
@Override
public void deleteAll() {
FileSystemUtils.deleteRecursively(root.toFile());
}
@Override
public Stream<Path> loadAll() {
try {
return Files.walk(this.root, 1).filter(path -> !path.equals(this.root)).map(this.root::relativize);
} catch (IOException e) {
throw new RuntimeException("Could not load the files!");
}
}
}
Create Controller for Image Upload
In controller package, we create FileController
.
controller/ImageController.java
package com.bezkoder.spring.thymeleaf.image.upload.controller;
// ...
import com.bezkoder.spring.thymeleaf.image.upload.service.FilesStorageService;
@Controller
public class ImageController {
@Autowired
FilesStorageService storageService;
@GetMapping("/")
public String homepage() {
return "redirect:/images";
}
@GetMapping("/images/new")
public String newImage(Model model) {
return "upload_form";
}
@PostMapping("/images/upload")
public String uploadImage(Model model, @RequestParam("file") MultipartFile file) {
...
return "upload_form";
}
@GetMapping("/images")
public String getListImages(Model model) {
...
return "images";
}
@GetMapping("/images/{filename:.+}")
public ResponseEntity<Resource> getImage(@PathVariable String filename) {
...
// return image
}
}
– @Controller
annotation is used to define a controller.
– @GetMapping
and @PostMapping
annotation is for mapping HTTP GET & POST requests onto specific handler methods and returning appropriate template files.
– We use @Autowired
to inject implementation of FilesStorageService
bean to local variable.
Setup the Template
In src/main/resources folder, create folder and file as following structure:
Header and Footer
We will use Thymeleaf Fragments (th:fragment
) to reuse some common parts such as header and footer.
Let’s write HTML code for them.
fragments/footer.html
<footer class="text-center">
Copyright © BezKoder
</footer>
And header that contains the navigation bar:
fragments/header.html
<header th:fragment="header">
<nav class="navbar navbar-expand-md bg-dark navbar-dark mb-3">
<a class="navbar-brand" th:href="@{/images}">
BezKoder
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="topNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" th:href="@{/images/new}">Upload</a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="@{/images}">Images</a>
</li>
</ul>
</div>
</nav>
</header>
Now we need to create HTML files, then import Thymeleaf fragments, Bootstrap, jQuery and Font Awesome.
Image Upload Form
upload_form.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />
<title>Spring Boot Image Upload example</title>
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
<script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body>
<div th:replace="fragments/header :: header"></div>
-- image upload form --
<div th:replace="fragments/footer :: footer"></div>
</body>
</html>
Display Images
images.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />
<title>Spring Boot Image Upload example</title>
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body>
<div th:replace="fragments/header :: header"></div>
-- list of images display --
<div th:replace="fragments/footer :: footer"></div>
</body>
</html>
Implement Image Upload function
We use @GetMapping
and @PostMapping
annotation is for mapping HTTP GET & POST requests onto specific handler methods:
- GET /images/new:
newImage()
– return upload_form.html template - POST /images/upload:
uploadImage()
– upload an Image
ImageController.java
package com.bezkoder.spring.thymeleaf.image.upload.controller;
import com.bezkoder.spring.thymeleaf.image.upload.service.FilesStorageService;
@Controller
public class ImageController {
@Autowired
FilesStorageService storageService;
@GetMapping("/images/new")
public String newImage(Model model) {
return "upload_form";
}
@PostMapping("/images/upload")
public String uploadImage(Model model, @RequestParam("file") MultipartFile file) {
String message = "";
try {
storageService.save(file);
message = "Uploaded the image successfully: " + file.getOriginalFilename();
model.addAttribute("message", message);
} catch (Exception e) {
message = "Could not upload the image: " + file.getOriginalFilename() + ". Error: " + e.getMessage();
model.addAttribute("message", message);
}
return "upload_form";
}
}
upload_form.html
<div class="container" style="max-width: 500px">
<h3 class="mb-3">Spring Boot Image Upload example</h3>
<form
id="uploadForm"
method="post"
th:action="@{/images/upload}"
enctype="multipart/form-data">
<input id="input-file" type="file" name="file" accept="image/png, image/jpeg" />
<button class="btn btn-sm btn-outline-success float-right" type="submit">
Upload
</button>
</form>
<div
th:if="${message != null}"
class="alert alert-secondary alert-dismissible fade show text-center message mt-3"
role="alert">
[[${message}]]
<button type="button" class="close btn-sm" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
Display List of Images
Firstly, we need to create ImageInfo
model which has fields: name
& url
.
model/ImageInfo.java
package com.bezkoder.spring.thymeleaf.image.upload.model;
public class ImageInfo {
private String name;
private String url;
public ImageInfo(String name, String url) {
this.name = name;
this.url = url;
}
public String getName() {
return this.name;
}
public void setName(String name) {
this.name = name;
}
public String getUrl() {
return this.url;
}
public void setUrl(String url) {
this.url = url;
}
}
In the Controller, we will return List of ImageInfo
objects as model Attribute.
@GetMapping
and @PostMapping
annotation is for mapping HTTP GET & POST requests onto specific handler methods:
- GET /images:
getListImages()
– return images.html template - GET /images/[filename]:
getImage()
– download an Image byfilename
ImageController.java
package com.bezkoder.spring.thymeleaf.image.upload.controller;
import com.bezkoder.spring.thymeleaf.image.upload.service.FilesStorageService;
@Controller
public class ImageController {
@Autowired
FilesStorageService storageService;
// ...
@GetMapping("/")
public String homepage() {
return "redirect:/images";
}
@GetMapping("/images")
public String getListImages(Model model) {
List<ImageInfo> imageInfos = storageService.loadAll().map(path -> {
String filename = path.getFileName().toString();
String url = MvcUriComponentsBuilder
.fromMethodName(ImageController.class, "getImage", path.getFileName().toString()).build().toString();
return new ImageInfo(filename, url);
}).collect(Collectors.toList());
model.addAttribute("images", imageInfos);
return "images";
}
@GetMapping("/images/{filename:.+}")
public ResponseEntity<Resource> getImage(@PathVariable String filename) {
Resource file = storageService.load(filename);
return ResponseEntity.ok()
.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getFilename() + "\"").body(file);
}
}
images.html
<div class="container-fluid" style="max-width: 600px; margin: 0 auto;">
<h2 class="text-center">List of Images</h2>
<div th:if="${images.size() > 0}">
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col">Image</th>
<th scope="col">File Name</th>
<th scope="col">Link</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr th:each="image : ${images}">
<td><img th:src="@{${image.url}}" alt="${image.name}" height="60px" /></td>
<td>[[${image.name}]]</td>
<td><a th:href="@{${image.url}}">Download</a></td>
<td>
<a th:href="@{'/images/delete/' + ${image.name}}" th:fileName="${image.name}" id="btnDelete"
title="Delete this image" class="fa-regular fa-trash-can icon-dark btn-delete"></a>
</td>
</tr>
</tbody>
</table>
</div>
<div th:unless="${images.size() > 0}">
<span>No files found!</span>
</div>
</div>
For deleting file, kindly visit following tutorial:
Spring Boot Delete File example with Thymeleaf
Configure Multipart File for Servlet
Let’s define the maximum file size that can be uploaded in application.properties as following:
spring.servlet.multipart.max-file-size=1MB
spring.servlet.multipart.max-request-size=1MB
– spring.servlet.multipart.max-file-size
: max file size for each request.
– spring.servlet.multipart.max-request-size
: max request size for a multipart/form-data.
Handle Image Upload Exception
This is where we handle the case in that a request exceeds Max Upload Size. The system will throw MaxUploadSizeExceededException
and we’re gonna use @ControllerAdvice
with @ExceptionHandler
annotation for handling the exceptions.
exception/FileUploadExceptionAdvice.java
package com.bezkoder.spring.thymeleaf.image.upload.exception;
import org.springframework.web.multipart.MaxUploadSizeExceededException;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
@ControllerAdvice
public class FileUploadExceptionAdvice {
@ExceptionHandler(MaxUploadSizeExceededException.class)
public String handleMaxSizeException(Model model, MaxUploadSizeExceededException e) {
model.addAttribute("message", "File is too large!");
return "upload_form";
}
}
Initialize Storage
We need to run init()
method of FilesStorageService
(and also deleteAll()
if necessary). So open SpringBootUploadImageApplication.java and implement CommandLineRunner
for run()
method like this:
package com.bezkoder.spring.thymeleaf.image.upload;
import javax.annotation.Resource;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import com.bezkoder.spring.thymeleaf.image.upload.service.FilesStorageService;
@SpringBootApplication
public class SpringBootUploadImageApplication implements CommandLineRunner {
@Resource
FilesStorageService storageService;
public static void main(String[] args) {
SpringApplication.run(SpringBootUploadImageApplication.class, args);
}
@Override
public void run(String... arg) throws Exception {
// storageService.deleteAll();
storageService.init();
}
}
Run the Spring Boot Image Upload example
Run Spring Boot application with command: mvn spring-boot:run
.
Source Code
You can find the complete source code for this tutorial on Github.
For deleting file:
Spring Boot Delete File example with Thymeleaf
Conclusion
Today we’ve learned how to create Spring Boot Image Upload example with Thymeleaf, Bootstrap and display images from static folder.
For upload multiple Files at once:
Spring Boot Multiple File upload with Thymeleaf
Or fullstack with frontend:
– Angular + Spring Boot: File upload example
– React + Spring Boot: File upload example
You can also know way to upload an Excel/CSV file and store the content in MySQL database with the post:
– Spring Boot: Upload/Import Excel file data into MySQL Database
– Spring Boot: Upload/Import CSV file data into MySQL Database
If you want to store files in database like this:
You can find instruction at:
Spring Boot Upload/Download File to/from Database example
Happy Learning! See you again.
Further Reading
– Spring Boot File upload REST API example
– Spring Boot Thymeleaf CRUD example
– Spring Boot Thymeleaf Pagination and Sorting example
Exception Handling:
– Spring Boot @ControllerAdvice & @ExceptionHandler example
– @RestControllerAdvice example in Spring Boot
Unit Test:
– Spring Boot Unit Test for JPA Repository
– Spring Boot Unit Test for Rest Controller
Deployment:
– Deploy Spring Boot App on AWS – Elastic Beanstalk
Associations:
– Spring Boot One To One example with JPA, Hibernate
– Spring Boot One To Many example with JPA, Hibernate
– Spring Boot Many to Many example with JPA, Hibernate