Upload Files to S3 AWS using Angular 9
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
0 Comments