Angular 5 – Upload/Get MultipartFile to/from Spring Boot Server
Tags: angular, angular5, springboot, multipartfile
Published: 2021-04-26 17:42:50

https://grokonez.com/java-integration/angular-5-upload-get-multipartfile-to-from-spring-boot-server

Angular 5 – Upload/Get MultipartFile to/from Spring Boot Server

When uploading files to Servlet containers, application needs to register a <strong>MultipartConfigElement</strong> class. But <strong>Spring Boot</strong> makes it more easy by configuring it automatically. In this tutorial, we're gonna look at way to build an Angular 5 App Client to upload/get MultipartFile to/from Spring Boot RestApi Server.

Related posts:
- <a href="https://grokonez.com/spring-framework/spring-boot/upload-multipartfile-spring-boot">How to upload MultipartFile with Spring Boot</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/multipartfile-create-spring-ajax-multipartfile-application-downloadupload-files-springboot-jquery-ajax-bootstrap">MultipartFile - SpringBoot + JQuery Ajax + Bootstrap.</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/multipartfile-create-spring-angularjs-multipartfile-application-downloadupload-files-springboot-angularjs-bootstrap">MultipartFile – SpringBoot + AngularJs + Bootstrap.</a>
- <a href="https://grokonez.com/frontend/angular/angular-4-firebase-get-list-files-firebase-storage">Angular 4 Firebase – Get List Files from Storage</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/angular-4-uploadget-multipartfile-tofrom-spring-boot-server">Angular 4 – Upload/Get MultipartFile to/from Spring Boot Server</a>

<!--more-->
<h2>I. Technologies</h2>
- Angular 5
- Java 1.8
- Spring Boot 1.5.7.RELEASE
- Maven 3.3.9
- Spring Tool Suite – Version 3.8.1.RELEASE
<h2>II. Overview</h2>
<h3>1. Spring Boot Server</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/03/angular-5-upload-multipart-file-spring-boot-spring-structure.png" alt="angular-5-upload-multipart-file-spring-boot-spring-structure" width="303" height="364" class="alignnone size-full wp-image-11424" />

- <code>StorageService</code> helps to init, delete all files, store file, load file
- <code>UploadController</code> uses <code>StorageService</code> to provide Rest API: POST a file, GET all files
- <strong>application.properties</strong> to configure parameters such as MultipartFile max size...
- Spring Boot Starter Web dependency in <strong>pom.xml</strong>
<h3>2. Angular 5 App Client</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/03/angular-5-upload-multipart-file-spring-boot-angular-structure.png" alt="angular-5-upload-multipart-file-spring-boot-angular-structure" width="251" height="325" class="alignnone size-full wp-image-11425" />

- <code>upload-file.service</code> provides methods: push File to Storage and get Files.
- <code>list-upload.component</code> gets and displays list of Files.
- <code>form-upload.component</code> helps upload File.
- <code>details-upload.component</code> is detail for each item in list of Files.

<img src="https://grokonez.com/wp-content/uploads/2018/03/angular-5-upload-multipart-file-spring-boot-angular-overview.png" alt="angular-5-upload-multipart-file-spring-boot-angular-overview" width="440" height="407" class="alignnone size-full wp-image-11426" />

<h2>III. Practice</h2>
<h3>1. Spring Boot Server</h3>
<h4>1.1 Create Spring Boot project</h4>
With Dependency:
<pre><code class="language-html">&lt;dependency&gt;
	&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
	&lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
&lt;/dependency&gt;</code></pre>
<h4>1.2 Create Storage Service for File Systems</h4>
Create <strong>StorageService</strong> 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 <strong>upload directory</strong>
<pre><code class="language-java">
package com.javasampleapproach.uploadfiles.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!");
		}
	}
}</code></pre>
<h4>1.3 Create Upload Controller</h4>

More at:

https://grokonez.com/java-integration/angular-5-upload-get-multipartfile-to-from-spring-boot-server

Angular 5 – Upload/Get MultipartFile to/from Spring Boot Server