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

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

Related posts:
How to upload MultipartFile with Spring Boot
MultipartFile – SpringBoot + JQuery Ajax + Bootstrap.
MultipartFile – SpringBoot + AngularJs + Bootstrap.

I. Technologies

– Angular 6
– Java 1.8
– Spring Boot 2.0.3.RELEASE
– Maven 3.3.9
– Spring Tool Suite 3.9.0.RELEASE

II. Overview

1. Spring Boot Server

angular-6-upload-multipart-files-spring-boot-server-project-structure-server

StorageService helps to init, delete all files, store file, load file
UploadController uses StorageService to provide Rest API: POST a file, GET all files
application.properties to configure parameters such as MultipartFile max size…
– Spring Boot Starter Web dependency in pom.xml

2. Angular 6 App Client

angular-6-upload-multipart-files-spring-boot-server-project-structure-client

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

angular-6-upload-multipart-file-spring-boot-angular-overview

III. Practice

1. Spring Boot Server
1.1 Create Spring Boot project

With Dependency:

1.2 Create Storage Service for File Systems

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

storage/StorageService.java

1.3 Create Upload Controller

controller/UploadController.java

1.4 Config multipart

Open application.properties:

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

1.5 Init Storage for File System

SpringBootUploadFileApplication.java

2. Angular 6 App Client
2.0 Generate Service & Components

Run commands below:
ng g s upload/UploadFile
ng g c upload/FormUpload
ng g c upload/ListUpload
ng g c upload/DetailsUpload
On each Component selector, delete app- prefix, then change tslint.json rules"component-selector" to false.

2.1 App Module

app.module.ts

2.2 Upload File Service

upload/upload-file.service.ts

2.3 Component for getting List of Files

upload/list-upload.component.ts

upload/list-upload.component.html

upload/details-upload.component.ts

upload/details-upload.component.html

2.4 Component for uploading File

upload/form-upload.component.ts

upload/form-upload.component.html

2.5 App Component

app.component.ts

app.component.html

2.6 Integrate Spring Boot Server with Angular 6 client

– Create proxy.conf.json file under project:

– Edit package.json file for ‘start’ script:

3. Check Results

Run Spring Boot Server and Angular 6 Client App (npm start).
Open Browser with url http://localhost:4200/.

Upload files and show list of Files:

angular-6-upload-multipart-files-spring-boot-server-browser-result

Inside Spring Project folder, open upload-dir folder:

angular-6-upload-multipart-files-spring-boot-server-folder-result

IV. Sourcecode

SpringBootFileUpload-Server
Angular6Upload-Client

By grokonez | June 27, 2018.



Related Posts


Got Something To Say:

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

*