Node.js/Express RestAPIs server – Angular 6 Upload/Download Files – Multer + Bootstrap

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

Related posts:
NodeJS/Express – Upload/Download MultipartFiles/Images – Multer + JQuery Ajax + Bootstrap
Node.js RestAPIs – Angular 6 HttpClient – Get/Post/Put/Delete requests + Bootstrap 4


  • Angular 6
  • RxJS 6
  • Nodejs – v8.11.3


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

Node.js RestAPIs

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

  •‘/api/file/upload’, upload.single(“file”), fileWorker.uploadFile);
  • router.get(‘/api/file/all’, fileWorker.listUrlFiles);
  • router.get(‘/api/file/:filename’, fileWorker.downloadFile);

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


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.



Node.js RestAPIs
Setting up NodeJS/Express project

Create a folder Node.js-UploadFiles:

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 & Cors:

-> Check package.json file:

Config Multer Upload

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

Express Routers

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

File Controllers

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


Implement ./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.html ->

App Component

app.component.ts ->

app.component.html ->

Check Results

Run Node.js Server (using npm start) and Angular 6 Client App (using ng serve)
Then open Browser with url http://localhost:4200/.

-> Upload files and show list of Files:


-> Inside ‘Node.js-UploadFiles’ project folder, open ‘uploads’ folder:


-> Click to the links to download files:



By grokonez | July 3, 2018.

Last updated on February 6, 2020.

Related Posts

3 thoughts on “Node.js/Express RestAPIs server – Angular 6 Upload/Download Files – Multer + Bootstrap”

Got Something To Say:

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