MultipartFile – How to create Spring AngularJs MultipartFile application to download/upload files | SpringBoot + AngularJs + Bootstrap.

In the past post, we had learned how to upload MultipartFile with SpringBoot and JQuery Ajax. Today, JavaSampleApproach shows how to create a Spring AngularJs MultipartFile application to download/upload file with SpringBoot, AngularJs and Bootstrap.

Related posts:
MultipartFile – How to create Spring Ajax MultipartFile application to download/upload files | SpringBoot + JQuery Ajax + Bootstrap
How to integrate Http Angularjs with Spring MVC | Spring Boot
How to integrate Angular 4 with SpringBoot Web App and SpringToolSuite
Angular 4 – Upload/Get MultipartFile to/from Spring Boot Server

I. Technologies

– Java 8
– Maven 3.6.1
– Spring Tool Suite: Version 3.8.4.RELEASE
– Spring Boot: 1.5.4.RELEASE
– JQuery
– Bootstrap

II. Practices

Create a SpringBoot project with below structure:

spring angularjs multipartfile - upload-import - structure projects

Step to do:
– Create SpringBoot project
– Create Storage Service
– Implement upload controller
– Implement AngularJs App
– Create upload page
– Init Storage for File System
– Run and check results

1. Create SpringBoot project

Open Spring Tool Suite, on main menu, choose File->New->Spring Starter Project, add project info, then press Next for needed dependencies:
– For Template Engines, choose Thymeleaf.
– For Web MVC, choose Web->Web.

SpringBoot download upload Multipartfile - add dependencies

Press Finish, Spring Boot project will be created successfully.
Open pom.xml file to check dependencies:


2. Create Storage Service

Create StorageService with 4 functions:
public void store(MultipartFile file): save a file
public Resource loadFile(String filename): load a file
public void deleteAll(): remove all uploaded files
public void init(): create upload directory


import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;
import org.springframework.util.FileSystemUtils;
import org.springframework.web.multipart.MultipartFile;

public class StorageService {
	Logger log = LoggerFactory.getLogger(this.getClass().getName());
	private final Path rootLocation = Paths.get("upload-dir");

	public void store(MultipartFile file){
		try {
            Files.copy(file.getInputStream(), this.rootLocation.resolve(file.getOriginalFilename()));
        } catch (Exception e) {
        	throw new RuntimeException("FAIL!");

    public Resource loadFile(String filename) {
        try {
            Path file = rootLocation.resolve(filename);
            Resource resource = new UrlResource(file.toUri());
            if(resource.exists() || resource.isReadable()) {
                return resource;
            	throw new RuntimeException("FAIL!");
        } catch (MalformedURLException e) {
        	throw new RuntimeException("FAIL!");
    public void deleteAll() {

    public void init() {
        try {
        } catch (IOException e) {
            throw new RuntimeException("Could not initialize storage!");

3. Implement upload controller

Create a RestUploadController with 3 RequestMapping:
@PostMapping("/api/uploadfile") is used to upload files.
@GetMapping("/api/getallfiles") is used to get all uploaded files
@GetMapping("/api/files/{filename:.+}") is used to download files.

package com.javasampleapproach.uploadfile.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
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.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.method.annotation.MvcUriComponentsBuilder;


public class RestUploadController {

	StorageService storageService;
	List files = new ArrayList();

    // Multiple file upload
    public String uploadFileMulti(@RequestParam("uploadfile") MultipartFile file) throws Exception {
    	try {;
			return "You successfully uploaded - " + file.getOriginalFilename();
		} catch (Exception e) {
			throw new Exception("FAIL! Maybe You had uploaded the file before or the file's size > 500KB");
	public List getListFiles() {List lstFiles = new ArrayList();
			lstFiles =
					.map(fileName -> MvcUriComponentsBuilder
							.fromMethodName(RestUploadController.class, "getFile", fileName).build().toString())
		}catch(Exception e){
			throw e;
		return lstFiles;

	public ResponseEntity getFile(@PathVariable String filename) {
		Resource file = storageService.loadFile(filename);
		return ResponseEntity.ok()
				.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getFilename() + "\"")

Open file, configure multipart.max-file:


spring.http.multipart.max-file-size: limit total file size for each request.
spring.http.multipart.max-request-size: limit total request size for a multipart/form-data.

4. Implement AngularJs App

4.1 Create AngularJs application

Define AngularJs application in jsaApp.js file:

var jsaApp = angular.module('jsaUploadFileApp', []);

jsaApp.directive('fileModel', ['$parse', function ($parse) {
    return {
       restrict: 'A',
       link: function(scope, element, attrs) {
          var model = $parse(attrs.fileModel);
          var modelSetter = model.assign;
          element.bind('change', function(){
                modelSetter(scope, element[0].files[0]);

Note: Angular’s ng-model can NOT bind with file input, so we need to create a custom directive fileModel for binding data.

4.2 Implement upload controller

Create uploadFileCtrl.js file to implement uploadFileController controller:

jsaApp.controller('uploadFileController', ['$scope', '$http', function($scope, $http){
    $scope.doUploadFile = function(){
       var file = $scope.uploadedFile;
       var url = "/api/uploadfile";
       var data = new FormData();
       data.append('uploadfile', file);
       var config = {
    	   	transformRequest: angular.identity,
    	   	transformResponse: angular.identity,
	   		headers : {
	   			'Content-Type': undefined
       $, data, config).then(function (response) {
		}, function (response) {

Note: with setting 'Content-Type': undefined, the browser will automatically change the Content-Type to multipart/form-data.

4.3 Implement get controller

Create a getFilesCtrl.js file to get all uploaded files:

jsaApp.controller('getFilesController', ['$scope', '$http', function($scope, $http){
    $scope.doGetFiles = function(){
       var url = "/api/getallfiles";
       $http.get(url).then(function (response) {
			$scope.lstFiles =;
		}, function (response) {

5. Create upload page

– Create a Controller for uploading page:

package com.javasampleapproach.uploadfile.controller;

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

public class IndexController {

    public String index() {
        return "upload";


– Use Bootstrap to implement upload page:

<!DOCTYPE html>
<html xmlns:th="">
    <title>Spring Boot - ANGULARJS UPLOAD FILES Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href=""></link>
	<script src=""></script>

<body class="container" ng-app="jsaUploadFileApp">

	<div  ng-controller="uploadFileController">
		<form class="form-horizontal">
			<div class="form-group">
				<label class="control-label col-sm-2" for="uploadfile">Upload File:</label>
				<div class="col-sm-5">
					<input class="form-control" type="file" file-model = "uploadedFile" placeholder="Upload File"></input>
			<div class="form-group"> 
			    <div class="col-sm-offset-2 col-sm-10">
			      <button type="submit" class="btn btn-default" ng-click = "doUploadFile()">Upload</button>
		<div class="col-sm-offset-2">
			<p ng-bind="uploadResult"></p>
	<div ng-controller="getFilesController">
		<div class="col-sm-offset-2">
			<button type="button" class="btn btn-primary btn-block" ng-click="doGetFiles()">Get Files</button>
		<div class="col-sm-offset-2" ng-model="lstFiles">
				<li ng-repeat="file in lstFiles"><a href='{{file}}'>{{file}}</a></li>
	<script src="/js/jsaApp.js"></script>
	<script src="/js/uploadFileCtrl.js"></script>
	<script src="/js/getFilesCtrl.js"></script>
	<!-- jQuery library -->
	<script src=""></script>
	<script src=""></script>


6. Init Storage for File System

In main class of the SpringBoot application, we use CommandLineRunner interface for initialize StorageService:

package com.javasampleapproach.uploadfile;

import javax.annotation.Resource;

import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;


public class SpringBootAngularJsMultipartFileApplication implements CommandLineRunner {

	StorageService storageService;
    public static void main(String[] args) throws Exception {, args);
	public void run(String... args) throws Exception {


7. Run and check results

Build and Run the SpringBoot project with commandlines {mvn clean install, mvn spring-boot:run}

– Make a request http://localhost:8080/ :

spring angularjs multipartfile - index screen

-> See headers:

– Choose files and do Upload:

spring angularjs multipartfile - choose file and do upload

– List uploaded files:

spring angularjs multipartfile - get uploaded list file

– Click on a link to download the file:

spring angularjs multipartfile - download a file

III. Sourcecode


By grokonez | July 17, 2017.

Last updated on May 10, 2021.

Related Posts

1 thought on “MultipartFile – How to create Spring AngularJs MultipartFile application to download/upload files | SpringBoot + AngularJs + Bootstrap.”

Got Something To Say:

Your email address will not be published. Required fields are marked *