Spring Boot upload multiple files example with freemarker

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

Spring boot upload multiple files example with Freemaker

Maven Dependencies
To create Spring boot upload multiple files example with freemaker, you need to add dependencies into pom.xml file like below:

<?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>

<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>

<?xml version="1.0" encoding="UTF-8"?>

<artifactId>spring-boot-upload-multiple-files</artifactId>

<name>spring-boot-upload-multiple-files</name>

<description>spring-boot-upload-multiple-files</description>

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

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

<version>1.3.6.RELEASE</version>

</parent>

<java.version>1.7</java.version>

</properties>

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

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

</dependency>

</dependencies>

<build>

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

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:/";
    }
}

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.

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Spring Boot upload multiple files example with freemaker</title>

</head>

<p>

</p>

<p>

</p>

</form>

<div>

<div>Uploaded files:</div>

<#list files as file>

<div>

${file.getName()}

</div>

</#list>

</div>

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.

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