Spring Boot upload multiple files example with freemaker walks you through the process of creating a upload multiple files example step by step. Here, we are using freemaker template in frontend side. Noticed that Spring Boot is sub-project developed by developers of spring framework, Spring Boot makes it easy to create stand-alone, production-grade Spring based applications with minimum configuration possible.
Other interesting posts you may like
Let’s begin:
If you are beginner on Spring Boot and Freemaker, before starting you should refer to the tutorial Spring Boot FreeMarker Hello World Example
Project structure
We will create a project with directory structure like below
Maven Dependencies
To create Spring boot upload multiple files example with freemaker, you need to add dependencies into pom.xml file like below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?xml version="1.0" encoding="UTF-8"?> <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/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <artifactId>spring-boot-upload-multiple-files</artifactId> <name>spring-boot-upload-multiple-files</name> <description>spring-boot-upload-multiple-files</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.3.6.RELEASE</version> </parent> <properties> <java.version>1.7</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project> |
Create the Controller
We create a upload controller named UploadController like below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
package com.javabycode.uploadingfiles; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException; @Controller public class UploadController { public static final String uploadDir = System.getProperty("user.dir") + "/uploadDir/"; @RequestMapping("/") public String forwardUpload(Model model) { File file = new File(uploadDir); model.addAttribute("files", file.listFiles()); return "upload_files"; } @RequestMapping(value = "/", method = RequestMethod.POST) public String uploadFiles(@RequestParam("uploadedFiles") MultipartFile[] uploadedFiles) throws IOException { for(MultipartFile f : uploadedFiles) { File file = new File(uploadDir + f.getOriginalFilename()); f.transferTo(file); } return "redirect:/"; } } |
Create the View
We create a upload form using freemaker template and display uploaded files.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Spring Boot upload multiple files example with freemaker</title> </head> <body onload="updateFiles();"> <form name="upload" enctype="multipart/form-data" action="/" method="POST"> <p> <div><input id="fileInput" type="file" name="uploadedFiles" onchange="updateFiles();" multiple></div> <div style="padding-top:20px" id="selectedFiles"></div> </p> <p> <input type="submit" value="Upload files"> </p> </form> <div> <div>Uploaded files:</div> <#list files as file> <div> ${file.getName()} </div> </#list> </div> <script> function updateFiles() { var nBytes = 0, fileInfo = '', oFiles = document.getElementById("fileInput").files, nFiles = oFiles.length; for (var nFileId = 0; nFileId < nFiles; nFileId++) { fileInfo += 'Filename='; fileInfo += oFiles[nFileId].name; fileInfo +=', size='; fileInfo += oFiles[nFileId].size; fileInfo +=' bytes'; fileInfo +='</br>'; } document.getElementById("selectedFiles").innerHTML = fileInfo; } </script> </body> </html> |
Configuration properties
We are setting these below properties in application.properties for FreeMarker templates file, stored src/main/resources directory like below:
|
1 2 |
spring.freemarker.template-loader-path: / spring.freemarker.suffix: .ftl |
Configure Spring Web Application
To set our application up as a servlet application we extend our main class with SpringBootServletInitializer and override the configure method using SpringApplicationBuilder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
package com.javabycode.uploadingfiles; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import java.io.File; import java.io.IOException; @SpringBootApplication public class MyApplication { public static void main(String[] args) throws IOException { new File(UploadController.uploadDir).mkdirs(); SpringApplication.run(MyApplication.class, args); } } |
Dig deeper: This line code
|
1 |
new File(UploadController.uploadDir).mkdirs() |
help to makes a directory for uploading files if not exists
Run Application
To deploy and run our Spring boot upload multiple files example with freemaker on web container, we run the below command in console
|
1 |
mvn spring-boot:run |
After running successfully, you can access the application via URL http://localhost:8080 and see the homepage such as
Now, you can choose which files you want to upload by hitting button “Choose files”, then the screen should show like this
To click the button “Upload files” to upload your files, the screen should be like this
That’s it on the tutorial Spring boot upload multiple files example with Freemaker.
References
Spring Boot FreeMarker
Download complete source code, please click link below
spring-boot-upload-multiple-files.zip (320 downloads)
Github: https://github.com/javabycode/spring-boot-upload-multiple-files
