Upload File to Amazon S3 Bucket Using AWS-SDK (Angular|NodeJS)
Amazon Simple Storage Service (Amazon S3) is most commonly used that every developer must know about it. Without wasting, we are going to upload the File to Amazon S3 using Angular as Front-End and NodeJS as Back-end.
Is that Cool 😍 ! Let’s Dive In.
Article will cover:
- Configure Amazon S3 Bucket.
- Write Our FE using Angular
- Play with NodeJS (AWS-SDK)
- Error discussion
- Drawback
- GitHub link
Configure Amazon S3 Bucket:
First, We need a IAM user. Let’s create it. Click on My Security Credentials under your username.
Next: write any name
Next: Follow the screenshot
Click Next
Click Next
Yes! 👏🏻 User is created.
Now we create an Amazon S3 bucket. Click on Services displayed on top nav-bar. Then moves to S3 and select create new S3 bucket.
Give any desired name to your bucket.
Warning! For demo purpose, I have un-check the Block all public access. (I leave it to you)
After pressing Create bucket, we have successfully create the bucket 💪🏼
Now we need to configure some CORS Configuration. Place the following code into cors configuration tab
That's leads to the end of this section.
Write Our FE using Angular
We need to create new project using amazing angular CLI command.
ng new s3FileUploadGreat, To keep our app simple, we are using just one App component and a file upload service. Have an at look at these files.
After running, our page will look like 👇. Simple file choose option and upload button.
We are done with our front-end design. Now we will cover NodeJS part.
Play with NodeJS (AWS-SDK)
That’s our core part. Here we need a couple of packages mainly:
- aws-sdk
- multer
- multer-s3
Simply using multer to upload to S3 bucket. Thanks to hacksparrow
Here, we are close to complete. Now we look at some error we face During this journey.
Error discussion :
Error : S3 Transfer Acceleration is not configured on this bucket
if we use useAccelerateEndpoint: true on S3 aws-sdk configuration like:
we have to enable the feature under Properties > Transfer acceleration
Error: The authorization mechanism you have provided is not supported
In order to encounter this Issue, we need to provide signatureVersion: ‘v4’ inside S3 aws-sdk like :
Drawback:
AWS-SDK come with some negative points 😩. It takes double efforts for uploading, as first we are uploading to our NodeJS server then taken to amazon S3 bucket. Another way is PresignUrl 😍 that directly leads to S3, we will discuss it on next article.👇
