Angular 12 Multiple Image Upload To S3 using DropZone & AWS-SDK

Angular-12 multiple-image-upload-to-s3-using dropzone aws-sdk

We are going to use Angular 12 with cool packages like dropzone and aws-sdk for uploading images with preview to AWS S3 bucket 🚀. Beautiful part 😍 is we not only focus 👀 on integrating packages but also fixing errors that might occur on our journey. 💪

Walk through all steps from Zero to Hero 💥

Steps include are:

1. Setup Angular-12 🔥
2. Install ngx-dropzone and ngx-toastr
3. Add aws-sdk package and play with some coding 🙇
4. Deals with configuration issues 🙉
5. Time to Design UI 😍
6. Setup S3 bucket
7. Add CORS permission
8. Create IAM user to be allowed to upload 🙋
9. Celebrate 💥
10. GitHub link 🔗

UI/UX design for our Angular App

1. Setup Angular-12 🔥

using angular-cli, just place the following command inside cmd and hit enter

ng new s3-img-upload

2. Install ngx-dropzone and ngx-toastr

In order to create image uploader zone and for notification messages we will be using ngx-toastr

npm i ngx-dropzone
npm i ngx-toastr

To configure ngx-dropzone we place the following code to working module in our case it's app.module.ts

// in app.module.ts
import { NgxDropzoneModule } from 'ngx-dropzone';

@NgModule({
  ...
  imports: [
    NgxDropzoneModule
  ],
  ...
})
export class AppModule { }

To configure ngx-toastr, involves two steps:

Step 1: Add style path to angular.json file

"styles": [
   "src/styles.css",
   "node_modules/ngx-toastr/toastr.css"
],

Step 2: Toastr configuration for App.module.ts looks like

import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ToastrModule } from 'ngx-toastr';

@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule, // required animations module
    ToastrModule.forRoot(), // ToastrModule added
  ],
  bootstrap: [App],
  declarations: [App],
})
class MainModule {}

3. Add aws-sdk package and play with some coding 🙇

Now simple install aws-sdk package as

npm i aws-sdk

wow, cool, we are getting close ❤️

let’s create a service that will communicate with our aws-s3 bucket 🗑️ for uploading images ⚡

Note: For Learnings purpose, I’m leaving my credentials as it is. Surely this will not work for your case because I will cleanup these secrets .😛

Hold your houses 🐎, on later section I will let u know to create these credentials that are:

• ACCESS_KEY_ID
• SECRET_ACCESS_KEY
• BUCKET_REGION
• BUCKET_NAME

Time ⌚ to import the service our component as:

export class AppComponent {
constructor(
private uploadS3Service: UploadS3Service
) {}
}

Let’s build and run. Oh, No! 💔 we are trapped with build errors.

4. Deals with configuration issues 🙉

Don’t worry. Let’s fix them one by one

Console flooded with errors because of importing aws-sdk package

Solution:

Step 1: Install the package

npm install — save-dev @types/node

Step 2: Add “types”: [“node”] to tsconfig.app.json file as:

{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [
      "node"  
]},
"files": [
    "src/main.ts",
    "src/polyfills.ts"
],
"include": [
     "src/**/*.d.ts"
 ]
}

Step 3: Add the following lines to polyfill.ts

if (typeof (window as any).global === 'undefined') {
(window as any).global = window;
}

In some angular version, above solution works 😇, but if you're still facing console errors like:

Install another package

npm install -S util

Let restart the server, Yaaahh! Its works 💥 🎉

5. Time to Design UI 😍

Continue with coding, move to app.component.ts and start implementing the different function according to user actions:

onSelect : To be called once user select an image.

onRemove: Remove the image from ngx-dropzone, once user click on cross icon on image

onImageUpdate: Finally the submit function

so finally app.component.ts

and app.component.html

And app.component.css

So finally Our Design Looks like:

UI/UX Angular project Home Page

6. Setup S3 bucket

Go to your AWS account and create S3 bucket by specifying the region closer to your location

S3 account click on create bucket

Place S3 bucket name, lowercase should be unique globally

So here we got

BUCKET_REGION = “us-east-2”
BUCKET_NAME = “purpleappfood123”

Unblock all public access

Wow ! Bucket has been created successfully!

Important : in order to allow image upload, we must set CORS permission

7. Add CORS Permission

So goes to permission Tab here and move down. At the end you will find the “Cross-origin resource sharing (CORS)” section.

Place the following permissions and hit enter

8. Create IAM user to be allowed to upload 🙋

Be calm, we are just at the end. We need a IAM user that have permission to be uploaded to S3. So we will be gonna that user permission on our project

Important: Assigning full permission is really a security secret, you can go into more granular level

So finally we Get the permission as, which will be used on angular service for image upload

ACCESS_KEY_ID ="AKIASNQ57G3KG34NQ7O6"
SECRET_ACCESS_KEY ="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"

9. Celebrate 💥

Wow, we have arrived at our destination. Multiple images are being upload to S3. Toastr message pops up on top right corner 🔥

App showing success notification after successfully uploading the images

10. GitHub link 🔗

mabdullah786/Angular-12-Multiple-Image-Upload-To-S3-using-DropZone-AWS-SDK

Thank you so much 👏 for being with me through the whole journey.