Spring Boot Multiple Files Upload with other input fields

This post helps you to upload multiple file and get other form input fields. We are using tools for the application.

  1. Spring Boot 1.4.3.RELEASE
  2. Thymeleaf
  3. Maven

Project Structure

spring-boot-file-upload-example

Project Dependencies


<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>com.startwithjava</groupId>
<artifactId>spring-boot-file-upload</artifactId>
<packaging>jar</packaging>
<version>1.0</version>

<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.4.3.RELEASE</version>
</parent>

<properties>
<java.version>1.8</java.version>
</properties>

<dependencies>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>

</dependencies>

<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>

</project>

RegistrationController.java

Upload multiple files and fetch form fields. Also you can display them on web page.

package com.startwithjava.controllers;
import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.util.ArrayList;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.startwithjava.RegistrationForm;

@Controller
public class RegistrationController {
//store uploaded file to this folder
private static String upload_dir = "F:/springfileupload/";

@GetMapping("/")
public String register() {
return "registration";
}
@PostMapping("/register")
public String doRegister(@ModelAttribute RegistrationForm form,ModelMap model,HttpSession session
) {
ArrayList<String> fileNames = null;
if(form.getAlbums().length>0) {
fileNames = new ArrayList<String>();
for(MultipartFile file:form.getAlbums()) {
if (file.isEmpty()) {
model.put("message", "Please select a file to upload");
}
try {
file.transferTo(new File(upload_dir + file.getOriginalFilename()));
fileNames.add(file.getOriginalFilename());
} catch (IOException e) {
e.printStackTrace();
}
}
}
model.put("message", "Please select a file to upload");
model.put("name", form.getName());
model.put("email", form.getEmail());
model.put("files",fileNames);
System.out.println("Email : "+form.getEmail());
return "success";
}

@RequestMapping(value = "/image/{imageName}")
@ResponseBody
public byte[] getImage(@PathVariable("imageName") String fileName) throws IOException{
File file = new File(upload_dir+fileName);
System.out.println(file.getAbsolutePath());
return Files.readAllBytes(file.toPath());
}
}

RegistrationForm.java

This is POJO class to be used by ModelAttribute in Controller. We need to provide each fields here with file field. Here MultipartFile [] is used for multiple files if you need only single file you simply used MultipartFile.


package com.startwithjava;

import org.springframework.web.multipart.MultipartFile;

public class RegistrationForm {

private String name;
private String email;
private MultipartFile [] albums;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public MultipartFile[] getAlbums() {
return albums;
}
public void setAlbums(MultipartFile[] albums) {
this.albums = albums;
}

}

registration.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>


<h1>Spring Boot Multiple File Upload Example</h1>




<form method="POST" action="/register" enctype="multipart/form-data">
    Name <input type="name" name="name"/>
    

    Email <input type="email" name="email"/>
    

    <input type="file" name="albums" multiple="multiple"/>

    <input type="submit" value="Submit" />
</form>


</body>
</html>

success.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>


<h1>Spring Boot - Success</h1>



<div th:if="${message}">
    
<h2 th:text="${message}"/>
</div>


<div th:if="${name}">
    Name : <b th:text="${name}"/>
</div>


<div th:if="${email}">
   Email : <b th:text="${email}"/>
</div>


<div th:each="file : ${files}" style="float:left;">
 <img th:attr="src=@{'/image/' + ${file}},title=${file},alt=${file}" />
</div>

</body>
</html>

application.properties

I have used embedded tomcat server port 9000. You can leave it or may use any other.

spring.http.multipart.max-file-size=10MB
spring.http.multipart.max-request-size=20MB
server.port = 9000

Download Source Code

Download Spring Boot Multiple File Upload

Leave a Reply