Upload Files to S3 AWS using Angular 9

Published by Gajanan Shinde on

Nowadays storage is a very important thing, we try to store things from floppy-CD/DVD-Pendrive-HardDisk and Now cloud is the new Trend,But what about file storage/upload from web/mobile app,various new storage services like Microsoft Azure,Google Firebase and AWS S3.

What is AWS S3?

Amazon Simple Storage Service (Amazon S3) is object storage built to store and retrieve any amount of data from web or mobile.

Set up for S3

1.Create an User

Go to https://console.aws.amazon.com/iam/
In the navigation pane, choose Users and then choose Add user.

Now set user-name and select User AWs access type as Programmatic access

2.Next to select Attach Existing policies directly in that AmazonS3FullAccess

3.Next to Create User

4.At Last to complete in that
You can able to download .csv for (Access key ID, Secret access key) that we can use for AWS connectivity to Angular
You can also see the List of user with their Access Key ID

Create S3 Bucket

First now go to https://s3.console.aws.amazon.com/s3/
1.Create Bucket

2.Add Bucket name and Region

Configure CORS for Bucket

Click on bucket and go to Permission Tab and then CORS config

Put this code in that CORS config

<?xml version=”1.0" encoding=”UTF-8"?>
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<ExposeHeader>ETag</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Configure CORS for Bucket, then click on Save button.

Create Angular Set up

Create new Angular app

> ng new s3aws

Install AWS SDK

Install the AWS SDK using the following npm command

> npm install aws-sdk –save

Create a service

Create a service for handling file upload using the following CLI command

> ng g s upload

next, import the following dependencies in UploadService class file

import * as AWS from 'aws-sdk/global';
import * as S3 from 'aws-sdk/clients/s3';

Create a method for upload a file in service. Here is the complete code of the upload method.

fileUpload(file) {
const contentType = file.type;
const bucket = new S3(
{
accessKeyId: 'AKIAABCDEFGHIJ7M2',
secretAccessKey: 'PvgIV3Nq1aPBwxxxxxxxxyyyyyyyyzzzzijNn',
region: 'ap-south-1',
}
);
const params = {
Bucket: 'gajstore',
Key: file.name,
Body: file,
ACL: 'public-read',
ContentType: contentType
};
bucket.upload(params, function (err, data) {
if (err) {
console.log('EROOR: ',JSON.stringify( err));
return false;
}
console.log('File Uploaded.', data);
return true;
});
}

ACCESS KEY ID and Secret ACCESS-KEY can get from downloaded .csv

Your app.component.html file like this

<div>
<input type="file" (change)="onChange($event)">
</div>
<div>
<button class="btn btn-success"(click)="submit()">Upload</button>
</div>


app.component.ts file

import { Component, OnInit } from '@angular/core';
import { UploadService } from './upload.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
toFile;
constructor(private uploadService: UploadService) { }

ngOnInit() {}

submit() {
const file = this.toFile.item(0);
this.uploadService.fileUpload(file);
}

onChange(event) {
this.toFile = event.target.files;
}
}

run this project using the following command

> ng serve

Upload the image or file from local

And click on upload
After uploading the file you have check the console log.

In log will find the location of the image
Now check the AWS S3 bucket if that data is present or not

Hurrey!!! That’s how you can upload file in Aws S3 Bucket

Categories: AngularAWS

0 Comments

Leave a Reply

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