SpringBoot Upload/Download Files Example – MultipartFile + Thymeleaf + Bootstrap 4

In the tutorial, we guide how to build a SpringBoot web-application to upload/download file with Thymeleaf engine and Bootstrap 4.

Contents

Technologies
Goal
Practice
SourceCode

Technologies

Java 8
Maven 3.6.1
Spring Tool Suite: Version 3.9.4.RELEASE
Spring Boot: 2.0.2.RELEASE
Bootstrap 4

Goal

We create a SpringBoot project as below:

SpringBoot-Upload-Download-MultipartFile-Thymeleaf-Bootstrap4-project-structure

-> Upload Form:

SpringBoot-Upload-Download-MultipartFile-Thymeleaf-Bootstrap4-upload-view

-> Download Form:

Practice

We create a SpringBoot project with below dependencies:

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

Frontend

Upload Multipart-Form

– Create /templates/multipartfile/uploadfile.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Upload MultipartFile</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
 
<body>
	<div class="container h-100">
	<div class="h-100">
		<div class="row h-100 justify-content-center align-items-center">
			<div class="col-sm-5">
				<h3>Upload MultipartFile to FileSystem</h3>
				<form method="POST" enctype="multipart/form-data" id="fileUploadForm">
					<div class="form-group">
						<label class="control-label" for="uploadfile">Upload File:</label>
						<input type="file" class="form-control" id="uploadfile" placeholder="Upload File"  name="uploadfile"></input>
					</div>
					<button type="submit" class="btn btn-default" id="btnSubmit">Upload</button>
					<a href="/files" class="btn btn-default" role="button">Files</a>
				</form>
				<div th:if="${message}">
					<span th:text="${message}"/>
				</div>
			</div>
		</div>
	</div>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Upload MultipartFile</title>

</head>

<body>

<h3>Upload MultipartFile to FileSystem</h3>

<label class="control-label" for="uploadfile">Upload File:</label>

</div>

<button type="submit" class="btn btn-default" id="btnSubmit">Upload</button>

<a href="/files" class="btn btn-default" role="button">Files</a>

</form>

</div>

</body>

</html>

Retrieves Files

– Create /templates/multipartfile/listfiles.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Upload MultipartFile</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>
	<div class="container h-100">
		<div class="row h-100 justify-content-center align-items-center">
			<div class="col-md-7 table-responsive">
				<h2>Uploaded Files</h2>
				<table id="customerTable" class="table">
					<thead>
						<tr>
							<th>No</th>
							<th>Filename</th>
							<th>Download</th>
						</tr>
					</thead>
					<tbody>
						<tr th:each="file, rowStat: ${files}">
					        <td th:text="${rowStat.count}">1</td>
							<td th:text="${file.filename}">File-Name</td>
					        <td><a th:href="${file.url}">Link</a></td>
					    </tr>
					</tbody>
				</table>
				<div>
					<a href="/" class="btn btn-light btn-block" role="button">Back to Upload Form</a>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Upload MultipartFile</title>

</head>

<body>

<h2>Uploaded Files</h2>

<thead>

<tr>

<th>Filename</th>

<th>Download</th>

</tr>

</thead>

<tbody>

</tr>

</tbody>

</table>

<div>

<a href="/" class="btn btn-light btn-block" role="button">Back to Upload Form</a>

</div>

</body>

</html>

Backend

File Storage Service

– Create interface FileStorage.java file:

package com.javasampleapproach.multipartfile.filestorage;

import java.nio.file.Path;
import java.util.stream.Stream;

import org.springframework.core.io.Resource;
import org.springframework.web.multipart.MultipartFile;

public interface FileStorage {
	public void store(MultipartFile file);
	public Resource loadFile(String filename);
	public void deleteAll();
	public void init();
	public Stream<Path> loadFiles();
}

package com.javasampleapproach.multipartfile.filestorage;

import java.nio.file.Path;

import java.util.stream.Stream;

import org.springframework.core.io.Resource;

import org.springframework.web.multipart.MultipartFile;

public interface FileStorage {

public void store(MultipartFile file);

public Resource loadFile(String filename);

public void deleteAll();

public void init();

public Stream<Path> loadFiles();

}

– Implement above interface by class FileStorageImpl.java:

package com.javasampleapproach.multipartfile.filestorage;

import java.io.IOException;
import java.net.MalformedURLException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.stream.Stream;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
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 FileStorageImpl implements FileStorage{
	
	Logger log = LoggerFactory.getLogger(this.getClass().getName());
	private final Path rootLocation = Paths.get("filestorage");
 
	@Override
	public void store(MultipartFile file){
		try {
            Files.copy(file.getInputStream(), this.rootLocation.resolve(file.getOriginalFilename()));
        } catch (Exception e) {
        	throw new RuntimeException("FAIL! -> message = " + e.getMessage());
        }
	}
	
	@Override
    public Resource loadFile(String filename) {
        try {
            Path file = rootLocation.resolve(filename);
            Resource resource = new UrlResource(file.toUri());
            if(resource.exists() || resource.isReadable()) {
                return resource;
            }else{
            	throw new RuntimeException("FAIL!");
            }
        } catch (MalformedURLException e) {
        	throw new RuntimeException("Error! -> message = " + e.getMessage());
        }
    }
    
	@Override
    public void deleteAll() {
        FileSystemUtils.deleteRecursively(rootLocation.toFile());
    }

	@Override
    public void init() {
        try {
            Files.createDirectory(rootLocation);
        } catch (IOException e) {
            throw new RuntimeException("Could not initialize storage!");
        }
    }

	@Override
	public Stream<Path> loadFiles() {
        try {
            return Files.walk(this.rootLocation, 1)
                .filter(path -> !path.equals(this.rootLocation))
                .map(this.rootLocation::relativize);
        }
        catch (IOException e) {
        	throw new RuntimeException("\"Failed to read stored file");
        }
	}
}

package com.javasampleapproach.multipartfile.filestorage;

import java.io.IOException;

import java.net.MalformedURLException;

import java.nio.file.Files;

import java.nio.file.Path;

import java.nio.file.Paths;

import java.util.stream.Stream;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

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 FileStorageImpl implements FileStorage{

Logger log = LoggerFactory.getLogger(this.getClass().getName());

private final Path rootLocation = Paths.get("filestorage");

@Override

public void store(MultipartFile file){

try {

Files.copy(file.getInputStream(), this.rootLocation.resolve(file.getOriginalFilename()));

} catch (Exception e) {

throw new RuntimeException("FAIL! -> message = " + e.getMessage());

}

@Override

public Resource loadFile(String filename) {

try {

Path file = rootLocation.resolve(filename);

Resource resource = new UrlResource(file.toUri());

if(resource.exists() || resource.isReadable()) {

return resource;

}else{

throw new RuntimeException("FAIL!");

}

} catch (MalformedURLException e) {

throw new RuntimeException("Error! -> message = " + e.getMessage());

}

@Override

public void deleteAll() {

FileSystemUtils.deleteRecursively(rootLocation.toFile());

}

@Override

public void init() {

try {

Files.createDirectory(rootLocation);

} catch (IOException e) {

throw new RuntimeException("Could not initialize storage!");

}

@Override

public Stream<Path> loadFiles() {

try {

return Files.walk(this.rootLocation, 1)

.filter(path -> !path.equals(this.rootLocation))

.map(this.rootLocation::relativize);

}

catch (IOException e) {

throw new RuntimeException("\"Failed to read stored file");

}

Upload/Download File Controller

– Firstly, create a simple data model FileInfo.java that contains information of a file:

package com.javasampleapproach.multipartfile.model;

public class FileInfo {
	private String filename;
	private String url;
	
	public FileInfo(String filename, String url) {
		this.filename = filename;
		this.url = url;
	}
	
	public String getFilename() {
		return this.filename;
	}
	
	public void setFilename(String filename) {
		this.filename = filename;
	}
	
	public String getUrl() {
		return this.url;
	}
	
	public void setUrl(String url) {
		this.url = url;
	}
}

package com.javasampleapproach.multipartfile.model;

public class FileInfo {

private String filename;

private String url;

public FileInfo(String filename, String url) {

this.filename = filename;

this.url = url;

}

public String getFilename() {

return this.filename;

}

public void setFilename(String filename) {

this.filename = filename;

}

public String getUrl() {

return this.url;

}

public void setUrl(String url) {

this.url = url;

}

– Implement controller UploadFileController.java:

package com.javasampleapproach.multipartfile.controller;

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.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import com.javasampleapproach.multipartfile.filestorage.FileStorage;

@Controller
public class UploadFileController {
	
	@Autowired
	FileStorage fileStorage;
	
    @GetMapping("/")
    public String index() {
        return "multipartfile/uploadform.html";
    }
    
    @PostMapping("/")
    public String uploadMultipartFile(@RequestParam("uploadfile") MultipartFile file, Model model) {
		try {
			fileStorage.store(file);
			model.addAttribute("message", "File uploaded successfully! -> filename = " + file.getOriginalFilename());
		} catch (Exception e) {
			model.addAttribute("message", "Fail! -> uploaded filename: " + file.getOriginalFilename());
		}
        return "multipartfile/uploadform.html";
    }
    
    
}

package com.javasampleapproach.multipartfile.controller;

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.PostMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.multipart.MultipartFile;

import com.javasampleapproach.multipartfile.filestorage.FileStorage;

@Controller

public class UploadFileController {

@Autowired

FileStorage fileStorage;

@GetMapping("/")

public String index() {

return "multipartfile/uploadform.html";

}

@PostMapping("/")

public String uploadMultipartFile(@RequestParam("uploadfile") MultipartFile file, Model model) {

try {

fileStorage.store(file);

model.addAttribute("message", "File uploaded successfully! -> filename = " + file.getOriginalFilename());

} catch (Exception e) {

model.addAttribute("message", "Fail! -> uploaded filename: " + file.getOriginalFilename());

}

return "multipartfile/uploadform.html";

}

– Implement controller DownloadFileController.java:

package com.javasampleapproach.multipartfile.controller;

import java.util.List;
import java.util.stream.Collectors;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.Resource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.servlet.mvc.method.annotation.MvcUriComponentsBuilder;

import com.javasampleapproach.multipartfile.filestorage.FileStorage;
import com.javasampleapproach.multipartfile.model.FileInfo;

@Controller
public class DownloadFileController {

	@Autowired
	FileStorage fileStorage;
	
	/*
	 * Retrieve Files' Information
	 */
	@GetMapping("/files")
	public String getListFiles(Model model) {
		List<FileInfo> fileInfos = fileStorage.loadFiles().map(
					path ->	{
						String filename = path.getFileName().toString();
						String url = MvcUriComponentsBuilder.fromMethodName(DownloadFileController.class,
		                        "downloadFile", path.getFileName().toString()).build().toString();
						return new FileInfo(filename, url); 
					} 
				)
				.collect(Collectors.toList());
		
		model.addAttribute("files", fileInfos);
		return "multipartfile/listfiles";
	}
 
    /*
     * Download Files
     */
	@GetMapping("/files/{filename}")
	public ResponseEntity<Resource> downloadFile(@PathVariable String filename) {
		Resource file = fileStorage.loadFile(filename);
		return ResponseEntity.ok()
					.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getFilename() + "\"")
					.body(file);	
	}
}

package com.javasampleapproach.multipartfile.controller;

import java.util.List;

import java.util.stream.Collectors;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.core.io.Resource;

import org.springframework.http.HttpHeaders;

import org.springframework.http.ResponseEntity;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.servlet.mvc.method.annotation.MvcUriComponentsBuilder;

import com.javasampleapproach.multipartfile.filestorage.FileStorage;

import com.javasampleapproach.multipartfile.model.FileInfo;

@Controller

public class DownloadFileController {

@Autowired

FileStorage fileStorage;

* Retrieve Files' Information

@GetMapping("/files")

public String getListFiles(Model model) {

List<FileInfo> fileInfos = fileStorage.loadFiles().map(

path -> {

String filename = path.getFileName().toString();

String url = MvcUriComponentsBuilder.fromMethodName(DownloadFileController.class,

"downloadFile", path.getFileName().toString()).build().toString();

return new FileInfo(filename, url);

}

)

.collect(Collectors.toList());

model.addAttribute("files", fileInfos);

return "multipartfile/listfiles";

}

* Download Files

@GetMapping("/files/{filename}")

public ResponseEntity<Resource> downloadFile(@PathVariable String filename) {

Resource file = fileStorage.loadFile(filename);

return ResponseEntity.ok()

.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getFilename() + "\"")

.body(file);

}

Note:
We can configure multipart.max-file in application.properties to limit the size of uploaded file:

spring.http.multipart.max-file-size=500KB
spring.http.multipart.max-request-size=500KB

1 2	spring.http.multipart.max-file-size=500KB spring.http.multipart.max-request-size=500KB

Run & Check Results

Run the SpringBoot project, then makes upload/download requests ->

Upload File

SpringBoot-Upload-Download-MultipartFile-Thymeleaf-Bootstrap4-upload-file-view

-> Browser Network logs:

SpringBoot-Upload-Download-MultipartFile-Thymeleaf-Bootstrap4-upload-file-network-logs

-> Stored files:

SpringBoot-Upload-Download-MultipartFile-Thymeleaf-Bootstrap4-all-uploaded-files

Retrieve Files

SpringBoot-Upload-Download-MultipartFile-Thymeleaf-Bootstrap4-retrieve-files

Download Files

SpringBoot-Upload-Download-MultipartFile-Thymeleaf-Bootstrap4-download-files-view

-> Browser Network logs:

SpringBoot-Upload-Download-MultipartFile-Thymeleaf-Bootstrap4-download-files

SourceCode

SpringUploadDownloadMultipartFile

By grokonez | January 20, 2017.

Last updated on September 15, 2018.

Post Tags

11 thoughts on “SpringBoot Upload/Download Files Example – MultipartFile + Thymeleaf + Bootstrap 4”

Lewis says:

July 12, 2017 at 10:05 pm

the unit test?

Reply
Deepak Das says:

August 5, 2017 at 10:47 am

Showing error in :fileName variable below used (error: fileName cant resolved to a variable)
public String getListFiles(Model model) {
model.addAttribute(“files”,
files.stream()
.map(fileName -> MvcUriComponentsBuilder
.fromMethodName(UploadController.class, “getFile”, fileName).build().toString())
.collect(Collectors.toList()));
model.addAttribute(“totalFiles”, “TotalFiles: ” + files.size());
return “listFiles”;
}

Reply
1. JavaSampleApproach says:
  
  August 6, 2017 at 9:06 am
  
  Hi Deepak Das,
  
  Please detail about your case, If you have problems with starting, So the below video can help more:
  
  https://youtu.be/VIn9xshqxKE
  
  Regards,
  
  Reply
Sergio says:

August 23, 2017 at 7:48 am

If it is possible please try to provide an example with the using of streams and tests and restful without JSP and that stores to mysql or mongodb.
Thanks!

Reply

What about storing the MultipartFile in the Controller?

We use a requestMapping in UploadController to handle upload file:

@Autowired
StorageService storageService;

...

@PostMapping("/")
public String handleFileUpload(@RequestParam("file") MultipartFile file, Model model) {
    try {
	storageService.store(file);
    ...

@Autowired

StorageService storageService;

...

@PostMapping("/")

public String handleFileUpload(@RequestParam("file") MultipartFile file, Model model) {

try {

storageService.store(file);

...

Then use storageService to store MultipartFile file.

Document upload size is woring as excepcted in local. howver in jboss server it got failed with the error message

{"timestamp":1511159296573,"status":500,"error":"Internal Server Error","exception":"java.lang.RuntimeException","message":"java.io.IOException: UT000020: Connection terminated as request was larger than 10485760",

1	{"timestamp":1511159296573,"status":500,"error":"Internal Server Error","exception":"java.lang.RuntimeException","message":"java.io.IOException: UT000020: Connection terminated as request was larger than 10485760",

is there any configuration for below 2 property in jboss undertow config file
spring.http.multipart.max-file-size=500KB
spring.http.multipart.max-request-size=500KB

Hello Prathwish Hegde,

Spring Boot includes support for embedded Tomcat, Jetty, and Undertow servers.
So I think you should start with embedded Undertow as configuration in pom.xml file:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    <exclusions>
        <exclusion>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </exclusion>
    </exclusions>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-undertow</artifactId>
</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-tomcat</artifactId>

</exclusion>

</exclusions>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-undertow</artifactId>

</dependency>

Regards,
JSA

Adolf Mrls says:

January 4, 2018 at 10:28 am

thx!!!
i have a problem: the spring boot app runs perfect.. the files copied to “upload-dir”
but… when i change the app to .war and run in tomcat NOT FOUND x(

…. tryed to copy the entiry directory manually but still fails… x(

HELP pls!

Reply
1. JavaSampleApproach says:
  
  January 5, 2018 at 4:03 am
  
  Hi Adolf Mrls,
  
  Do you have check the permission for create-read on your folder?
  Can you try to work with absolute path of ‘upload-dir’.
  
  Regards,
  JSA
  
  Reply
dridi says:

April 9, 2018 at 1:23 pm

hi, i tried your code but when i want to test it with postman it replies with
{
“timestamp”: “2018-04-09T13:20:24.966+0000”,
“status”: 400,
“error”: “Bad Request”,
“message”: “Required request part ‘file’ is not present”,
“path”: “/”
}
please any help ?

Reply

Technologies

Goal

Practice

Frontend

Upload Multipart-Form

Retrieves Files

Backend

File Storage Service

Upload/Download File Controller

Run & Check Results

Upload File

Retrieve Files

Download Files

SourceCode

Related Posts

Post Tags

11 thoughts on “SpringBoot Upload/Download Files Example – MultipartFile + Thymeleaf + Bootstrap 4”

Got Something To Say: Cancel reply