Angular 6 Client – Upload Files/Download Files to PostgreSQL with SpringBoot RestAPIs example

In the tutorial, we show how to upload/download files from Angular 6 Client to PostgreSQL with SpringBoot RestAPIs.

Related posts:
Angular 6 – Upload/Get MultipartFile to/from Spring Boot Server
How to upload MultipartFile with Spring Boot

Technologies

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

Overview

SpringBoot Server

We create a SpringBoot project as below:

angular-6-upload-download-files-springboot-postgresql-springboot-structure

Using @Lob annotation and Spring JPA to save file’s data to PostgreSQL.

-> PostgreSQL records:

angular-6-upload-download-files-springboot-postgresql-records

Angular 6 Client

Project structure ->

angular-6-upload-download-files-springboot-postgresql-angular-project-structure

  • 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-download-files-springboot-postgresql-overview

Practice

SpringBoot Server
Create SpringBoot project

We create a SpringBoot project with below dependencies:

  • spring-boot-starter-thymeleaf
  • spring-boot-starter-web
  • spring-boot-starter-data-jpa
  • postgresql

-> Details:

Data Model

– Create a View with @JsonView in ‘View.java’ file:

– Create ‘FileModel.java’ file:

JPA Repository

Implement JPA repository in ‘FileRepository.java’ file:

– Configure @EnableTransactionManagement in main class ‘SpringBootUploadMultipartFile2PostgreSqlApplication.java’:

Upload/Download RestAPIs

– Implement upload-file RestAPI in ‘UploadFileController.java’ file:

– Implement download/retrieve files RestAPIs in ‘DownloadFileController.java’ file:

– Configure cross-origin for Angular-Client which running at port 4200 ->

@CrossOrigin(origins = "http://localhost:4200")

PostgreSQL Connection

– Add setting in ‘application.properties’ file:

Angular 6 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 SpringBoot Server (using mvn spring-boot:run) and Angular 6 Client App (using ng serve)
Then open Browser with url http://localhost:4200/.

-> Upload files and show list of Files:

angular-6-upload-download-files-springboot-postgresql-upload-files

-> PostgreSQL records:

angular-6-upload-download-files-springboot-postgresql-records

-> Click to the links to download files:

angular-6-upload-download-files-springboot-postgresql-results

SourceCode

By JavaSampleApproach | July 5, 2018.

Related Posts


Got Something To Say:

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

*