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

angular-6-node-js-amazon-s3-upload-files-download-files-list-files-using-express-restapi-multer-aws-sdk-feature-image

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:

Technologies

  • Angular 6
  • Node.js/Express
  • Express
  • Multer
  • AWS-SDK

Overview

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

Demo

Node.js RestAPIs

Project structure ->

angular-6-nodejs-express-restapis-upload-file-download-file-to-amazon-s3-using-multer-middleware-aws-sdk-nodejs-project

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

  • router.post('/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 ->

angular-6-nodejs-express-restapis-upload-file-download-file-to-amazon-s3-using-multer-middleware-aws-sdk-angular-6-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-nodejs-express-restapis-upload-file-download-file-to-amazon-s3-using-multer-middleware-aws-sdk-angular-6-project-design

Practice

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

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

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:

angular-6-nodejs-express-restapis-upload-file-download-file-to-amazon-s3-using-multer-middleware-aws-sdk-upload-files

-> Amazon S3 Files:

angular-6-nodejs-express-restapis-upload-file-download-file-to-amazon-s3-using-multer-middleware-aws-sdk-amazon-s3-bucket

-> Click to the links to download files:

angular-6-nodejs-express-restapis-upload-file-download-file-to-amazon-s3-using-multer-middleware-aws-sdk-download-files-successfully

SourceCode

NodejsUploadDownloadFileAmazonS3
Angular-6-Upload-Download-Files

By grokonez | August 27, 2018.



Related Posts


Got Something To Say:

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

*