Amazon S3 + Angular 6 HttpClient + SpringBoot – Upload/Download Files/Images Example


Amazon Simple Storage Service (Amazon S3) is object storage built to store and retrieve any amount of data from web or mobile. Amazon S3 is designed to scale computing easier for developers. In the tutorial, we show how to build an Angular 6 App Client to upload/download files/images to/from Amazon S3 with Spring Boot RestApi Server.

Related posts:
Amazon S3 – SpringBoot RestAPIs Upload/Download File/Image to S3
Amazon S3 – SpringBoot RestAPIs List All Files in S3 Bucket
Angular 6 – Upload/Get MultipartFile to/from Spring Boot Server


– Angular 6
– Java 1.8
– Spring Boot 2.0.4.RELEASE
– Maven 3.3.9
– Spring Tool Suite 3.9.0.RELEASE
– Amazon S3



Spring Boot Server

We expose 3 RestAPIs:

  • @PostMapping("/api/file/upload")
  • @GetMapping("/api/file/{keyname}")
  • @GetMapping("/api/file/all")

angular-6-spring-boot-amazon-s3-upload-download-files + springboot project

– For init an AmazonS3 client, we use:

– For upload S3 objects, we use:

– For download S3 objects, we use:

Angular 6 App Client

angular-6-spring-boot-amazon-s3-upload-download-files + angular project

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-spring-boot-amazon-s3-upload-download-files + angular-component-overview


SpringBoot Server
Create SprigBoot Project

We use SpringToolSuite to create SpringBoot project with needed dependencies:

Configure Amazon Client ->

In, add aws configuration:

S3 Upload/Download Service

Interface ->

Implementation ->

Upload/Download RestAPIs

– Expose Upload RestAPI in controller ->

– Expose Download RestAPI in controller ->

Angular 6 App Client
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.

App Module

app.module.ts ->

Upload File Service

upload/upload-file.service.ts ->

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

Component for uploading File

upload/form-upload.component.ts ->

upload/form-upload.component.html ->

App Component

app.component.ts ->

app.component.html ->

Run & 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-spring-boot-amazon-s3-upload-download-files + list-all-uploaded-files

– File on Amazon S3 ->

angular-6-spring-boot-amazon-s3-upload-download-files + files on s3

– Download Files ->

angular-6-spring-boot-amazon-s3-upload-download-files + download files on s3



Note: In SpringS3Amazon project, open file, then change & to yours.

By grokonez | August 6, 2018.

Related Posts

1 thought on “Amazon S3 + Angular 6 HttpClient + SpringBoot – Upload/Download Files/Images Example”

Got Something To Say:

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