Angular 6 + Node.js + Amazon S3 | Upload Files + Download Files + List Files | using Express RestAPI, Multer, AWS-SDK


In the tutorial, we show how to use Angular 6 Client to download files/ upload files from Amazon S3 by Node.js RestAPIs server using Multer middleware and AWS-SDK.

Related posts:
Node.js RestAPIs Download File from Amazon S3
Node.js RestAPIs Upload file to Amazon S3
Node.js RestAPIs – Angular 6 HttpClient – Get/Post/Put/Delete requests + Bootstrap 4
Amazon S3 – Upload/download large files to S3 with SpringBoot Amazon S3

Related pages:


  • Angular 6
  • Node.js/Express
  • Express
  • Multer


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


Node.js RestAPIs

Project structure ->


– Node.js use AWS-SDK S3 to download/upload files ->

– S3 APIs to download/upload/list files ->

– Node.js exposes RestAPIs to download/upload/list files ->

  •'/api/files/upload', upload.single("file"), awsWorker.doUpload);
  • router.get('/api/files/all', awsWorker.listKeyNames);
  • router.get('/api/files/:filename', awsWorker.doDownload);

– 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 Node.js project

Create a folder NodejsUploadDownloadFileAmazonS3, then init Node.js project ->

Install Express, Multer, Cors, AWS-SDK ->

npm install express multer cors aws-sdk --save

-> package.json file:

Multer Config

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

AWS S3 Config

– Create a file ./app/config/s3.env.js ->

– Configure S3 Client in a file ./app/config/s3.config.js ->

Express Routers

– Create router in file ./app/routers/s3.router.js ->

Upload/Download/List Files Controller

– Implement S3 Uploader in a controller file ./app/controllers/s3.controller.js ->


server.js ->

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

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


-> Amazon S3 Files:


-> Click to the links to download files:




By grokonez | August 27, 2018.

Related Posts

4 thoughts on “Angular 6 + Node.js + Amazon S3 | Upload Files + Download Files + List Files | using Express RestAPI, Multer, AWS-SDK”

  1. Excellent work, I have a doubt. Try uploading a 24MB file and the upload does not end, will it have anything to do with memory storage?

Got Something To Say:

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