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.

Contents

I. Technologies
II. Practices
III. Sourcecode

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:

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

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

package com.javasampleapproach.uploadfile.storage;

import java.io.IOException;
import java.net.MalformedURLException;
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.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 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;
            }else{
            	throw new RuntimeException("FAIL!");
            }
        } catch (MalformedURLException e) {
        	throw new RuntimeException("FAIL!");
        }
    }
    
    public void deleteAll() {
        FileSystemUtils.deleteRecursively(rootLocation.toFile());
    }

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

package com.javasampleapproach.uploadfile.storage;

import java.io.IOException;

import java.net.MalformedURLException;

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

}else{

throw new RuntimeException("FAIL!");

}

} catch (MalformedURLException e) {

throw new RuntimeException("FAIL!");

}

public void deleteAll() {

FileSystemUtils.deleteRecursively(rootLocation.toFile());

}

public void init() {

try {

Files.createDirectory(rootLocation);

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

import com.javasampleapproach.uploadfile.storage.StorageService;

@RestController
@RequestMapping("/api")
public class RestUploadController {

	@Autowired
	StorageService storageService;
	
	List<String> files = new ArrayList<String>();

    // Multiple file upload
    @PostMapping("/uploadfile")
    public String uploadFileMulti(@RequestParam("uploadfile") MultipartFile file) throws Exception {
    	try {
			storageService.store(file);
			files.add(file.getOriginalFilename());
			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");
		}
    }
    
	@GetMapping("/getallfiles")
	public List<String> getListFiles() {List<String> lstFiles = new ArrayList<String>();
		try{
			lstFiles = files.stream()
					.map(fileName -> MvcUriComponentsBuilder
							.fromMethodName(RestUploadController.class, "getFile", fileName).build().toString())
					.collect(Collectors.toList());	
		}catch(Exception e){
			throw e;
		}
		
		return lstFiles;
	}

	@GetMapping("/files/{filename:.+}")
	public ResponseEntity<Resource> getFile(@PathVariable String filename) {
		Resource file = storageService.loadFile(filename);
		return ResponseEntity.ok()
				.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getFilename() + "\"")
				.body(file);
	}
}

package com.javasampleapproach.uploadfile.controller;

import java.util.ArrayList;

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

import com.javasampleapproach.uploadfile.storage.StorageService;

@RestController

@RequestMapping("/api")

public class RestUploadController {

@Autowired

StorageService storageService;

List<String> files = new ArrayList<String>();

// Multiple file upload

@PostMapping("/uploadfile")

public String uploadFileMulti(@RequestParam("uploadfile") MultipartFile file) throws Exception {

try {

storageService.store(file);

files.add(file.getOriginalFilename());

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");

}

@GetMapping("/getallfiles")

public List<String> getListFiles() {List<String> lstFiles = new ArrayList<String>();

try{

lstFiles = files.stream()

.map(fileName -> MvcUriComponentsBuilder

.fromMethodName(RestUploadController.class, "getFile", fileName).build().toString())

.collect(Collectors.toList());

}catch(Exception e){

throw e;

}

return lstFiles;

}

@GetMapping("/files/{filename:.+}")

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

Resource file = storageService.loadFile(filename);

return ResponseEntity.ok()

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

.body(file);

}

Open application.properties file, configure multipart.max-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

– 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

How to integrate Http Angularjs with Spring MVC | Spring Boot

4.1 Create AngularJs application

Define AngularJs application in jsaApp.js file:

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

// DIRECTIVE - FILE MODEL
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(){
             scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
             });
          });
       }
    };
}]);

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

// DIRECTIVE - FILE MODEL

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(){

scope.$apply(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:

// CONTROLLER UPLOAD FILE
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
	   	    }
       }
       
       $http.post(url, data, config).then(function (response) {
			$scope.uploadResult=response.data;
		}, function (response) {
			$scope.uploadResult=response.data;
		});
    };
}]);

// CONTROLLER UPLOAD FILE

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

}

$http.post(url, data, config).then(function (response) {

$scope.uploadResult=response.data;

}, function (response) {

$scope.uploadResult=response.data;

});

};

}]);

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 = response.data;
		}, function (response) {
			alert(response.data);
		});
    };
}]);

jsaApp.controller('getFilesController', ['$scope', '$http', function($scope, $http){

$scope.doGetFiles = function(){

var url = "/api/getallfiles";

$http.get(url).then(function (response) {

$scope.lstFiles = response.data;

}, function (response) {

alert(response.data);

});

};

}]);

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;

@Controller
public class IndexController {

    @GetMapping("/")
    public String index() {
        return "upload";
    }

}

package com.javasampleapproach.uploadfile.controller;

import org.springframework.stereotype.Controller;

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

@Controller

public class IndexController {

@GetMapping("/")

public String index() {

return "upload";

}

– Use Bootstrap to implement upload page:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<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>
			</div>
			<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>
			</div>
		</form>
		<hr/>
		<div class="col-sm-offset-2">
			<p ng-bind="uploadResult"></p>
		</div>
	</div>
	
	<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>
		<hr/>
		<div class="col-sm-offset-2" ng-model="lstFiles">
			<ul>
				<li ng-repeat="file in lstFiles"><a href='{{file}}'>{{file}}</a></li>
			</ul>
		</div>			
	</div>
	
	<script src="/js/jsaApp.js"></script>
	<script src="/js/uploadFileCtrl.js"></script>
	<script src="/js/getFilesCtrl.js"></script>
	
	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Spring Boot - ANGULARJS UPLOAD FILES Example</title>

</head>

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

</div>

<button type="submit" class="btn btn-default" ng-click = "doUploadFile()">Upload</button>

</div>

</form>

<hr/>

</div>

<button type="button" class="btn btn-primary btn-block" ng-click="doGetFiles()">Get Files</button>

</div>

<hr/>

<ul>

</ul>

</div>

</body>

</html>

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;

import com.javasampleapproach.uploadfile.storage.StorageService;

@SpringBootApplication
public class SpringBootAngularJsMultipartFileApplication implements CommandLineRunner {

	@Resource
	StorageService storageService;
    
    public static void main(String[] args) throws Exception {
        SpringApplication.run(SpringBootAngularJsMultipartFileApplication.class, args);
    }
    
	@Override
	public void run(String... args) throws Exception {
		storageService.deleteAll();
		storageService.init();
	}

}

package com.javasampleapproach.uploadfile;

import javax.annotation.Resource;

import org.springframework.boot.CommandLineRunner;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

import com.javasampleapproach.uploadfile.storage.StorageService;

@SpringBootApplication

public class SpringBootAngularJsMultipartFileApplication implements CommandLineRunner {

@Resource

StorageService storageService;

public static void main(String[] args) throws Exception {

SpringApplication.run(SpringBootAngularJsMultipartFileApplication.class, args);

}

@Override

public void run(String... args) throws Exception {

storageService.deleteAll();

storageService.init();

}

7. Run and check results

How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4

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

SpringBootAngularJSMultipartFile

By grokonez | July 17, 2017.

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

Anil says:
September 10, 2017 at 5:56 am
can you do video on how to send file + Json object in single $http.post() request in Angularjs with spring boot

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

I. Technologies

II. Practices

1. Create SpringBoot project

2. Create Storage Service

3. Implement upload controller

4. Implement AngularJs App

4.1 Create AngularJs application

4.2 Implement upload controller

4.3 Implement get controller

5. Create upload page

6. Init Storage for File System

7. Run and check results

III. Sourcecode

Post Tags

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

Got Something To Say: Cancel reply

I. Technologies

II. Practices

1. Create SpringBoot project

2. Create Storage Service

3. Implement upload controller

4. Implement AngularJs App

4.1 Create AngularJs application

4.2 Implement upload controller

4.3 Implement get controller

5. Create upload page

6. Init Storage for File System

7. Run and check results

III. Sourcecode

Related Posts

Post Tags

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

Got Something To Say: Cancel reply