Angular 6 HttpClient – Upload File/Download File from PostgreSQL – with Node.js/Express RestAPIs example – using Multer + Sequelize ORM

In the tutorial, we show how to upload files, download files from Angular 6 Client to PostgreSQL with Node.js RestAPIs server using Multer middleware and Sequelize ORM.

Related posts:
Node.js/Express RestAPIs server – Angular 6 Upload/Download Files – Multer + Bootstrap
Node.js/Express – PostgreSQL example – Upload File/Download File – Multer + Sequelize CRUD

Technologies

  • Angular 6
  • RxJS 6
  • Bootstrap 4
  • Visual Studio Code – version 1.24.0
  • Nodejs – v8.11.3
  • Multer
  • Sequelize
  • PostgreSQL

Overview

We create 2 projects: {Node.js, Angular}

Node.js RestAPIs

Project structure ->

angular-6-httpclient-postgresql-example-node-js-express-upload-file-download-files-sequelize-orm-crud-multer + node-js-project-structure

– Node.js project exposes RestAPIs to upload/download files:

  • router.post('/api/file/upload', upload.single("file"), fileWorker.uploadFile);
  • router.get('/api/file/info', fileWorker.listAllFiles);
  • router.get('/api/file/:id', fileWorker.downloadFile);

Configure cross-origin for Angular-Client which running at port: 4200.

Upload File ->

To upload MultipartFile, we use Multer middleware. Setup Mutter-Memory storage:

How to upload file and save it to PostgreSQL?

– Router to handle uploaded-file from multipart/form-data:

– Now, uploaded file is stored in req.file.buffer. Save it to PostgreSQL with Sequelize ORM:

Download File ->

For getting file from PostgreSQL then sending to client, we use Squelize ORM and stream module as below code:

Angular 6 Client

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-httpclient-postgresql-example-node-js-express-upload-file-download-files-sequelize-orm-crud-multer + angular-component-overviews

PostgreSQL’s records:

angular-6-httpclient-postgresql-example-node-js-express-upload-file-download-files-sequelize-orm-crud-multer + postgresql-records

Practice

Node.js RestAPIs
Setting up NodeJs/Express project

Create a folder Node.js-Express-Upload-Download-Files-PostgreSQL:

Then init NodeJS project:

We need express, multer and cors modules.
– Express is one of the most popular web frameworks for NodeJs which is built on top of Node.js http module, and adds support for routing, middleware, view system etc.
– Multer is a node.js middleware for handling multipart/form-data , which is primarily used for uploading files.
– Cors: a mechanism that uses HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.

-> Install Express, Multer, Sequelize, PostgreSQL, Cors:

-> see package.json file:

Sequelize Model

– Create a File model, see ./app/models/file.model.js file:

Multer Config

– Create ./app/config/multer.config.js file:

Setting up PostgreSQL connection

– Create ./app/config/env.js file:

– Setup PostgreSQL connection with Sequelize in ./app/config/db.config.js file:

Express Routers

– Create ./app/routers/file.router.js file:

Download/Upload Controllers

– Create ./app/controllers/file.controller.js file:

Server.js

– Create ./server.js 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 Node.js Server (using npm start)-> Logs:

Run Angular 6 Client App (using ng serve)
Then open Browser with url http://localhost:4200/.

-> Upload files and show list of Files:

angular-6-httpclient-postgresql-example-node-js-express-upload-file-download-files-sequelize-orm-crud-multer + upload-files

-> PostgreSQL’s records

angular-6-httpclient-postgresql-example-node-js-express-upload-file-download-files-sequelize-orm-crud-multer + postgresql-records

-> Click to the links to download files:

angular-6-httpclient-postgresql-example-node-js-express-upload-file-download-files-sequelize-orm-crud-multer + download-files

-> Sequelize’s logs:

SourceCode

Angular-6-HttpClient-Upload-Download-Files
Node.js-Express-Upload-Download-Files-PostgreSQL

By grokonez | July 13, 2018.



Related Posts


2 thoughts on “Angular 6 HttpClient – Upload File/Download File from PostgreSQL – with Node.js/Express RestAPIs example – using Multer + Sequelize ORM”

  1. It is the best time to make a few plans for the longer term and it’s time to be happy.

    I’ve read this post and if I may I desire to counsel you some fascinating things or tips.
    Perhaps you can write subsequent articles referring to
    this article. I wish to read more things approximately
    it!

    maglia Chelsea poco prezzo

  2. I wanted to thank you for this good read!! I definitely loved every bit of it.
    I’ve got you bookmarked to look at new things you post…

    Barcelona tröja

Got Something To Say:

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

*