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

Technologies

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

Overview

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

Practice

SpringBoot Server
Create SprigBoot Project

We use SpringToolSuite to create SpringBoot project with needed dependencies:

Configure Amazon Client

S3Config.java ->

In application.properties, add aws configuration:

S3 Upload/Download Service

Interface S3Services.java ->

Implementation S3ServicesImpl.java ->

Upload/Download RestAPIs

– Expose Upload RestAPI in controller UploadFileController.java ->

– Expose Download RestAPI in controller DownloadFileController.java ->

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

Sourcecode

Angular6UploadFileClient
SpringS3Amazon

Note: In SpringS3Amazon project, open application.properties file, then change gkz.aws.access_key_id & gkz.aws.secret_access_key to yours.

By grokonez | August 6, 2018.



Related Posts


Got Something To Say:

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

*