How to upload file in AWS S3 from Angular 8

Question

I am facing errors while uploading files to S3 from Angular 8 Project. I have follow below tutorial and do the required things

https://medium.com/ramsatt/angular-7-upload-file-to-amazon-s3-bucket-ba27022bad54

But I am not able to use S3 Library in service file.

below lines are generating errors that i think but still not sure where is missing things

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

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

Is there anyone who can help me to get rid out of it.

Solution 1

Finally I have solved the issue by below Steps:

Step 1 :

npm install --save-dev @types/node

Step 2 :

Use Reference : https://github.com/aws/aws-sdk-js/issues/1271 (Step 2)

Step 3 :

Use Reference : https://github.com/bevacqua/dragula/issues/602 (Step 3)

public uploadFileToAws(file, folderName, newFileName) {

    var aws_cognito_identity_pool_id = environment.pool_id;
    var aws_cognito_region = environment.aws_cognito_region;
    var aws_project_region = environment.aws_project_region;
    AWS.config.region = aws_project_region;
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
      IdentityPoolId: aws_cognito_identity_pool_id
    }, {
        region: aws_cognito_region
      });
    AWS.config.update({ customUserAgent: 'MobileHub v0.1' });

    const s3 = new S3({
      apiVersion: '2006-03-01',
      params: { Bucket: environment.bucket }
    });

    s3.upload({
        Key: folderName+'/'+newFileName,
        Bucket: environment.bucket,
        Body: file,
        ACL: 'private'
      },function (err, data) {
        this.fileuploading = false;
        if (err) {
          console.log(err, 'there was an error uploading your file');
        } else {
          console.log(data.Key+ ' uploaded successfully');          
        }        
        return true;
      });
  }

Solution 2

I finally come with solution after spending couple of hours on it. solutions steps are as below for Angular 8 Project.

1. Install dependancy

   npm install --save-dev @types/node

2. Need to add "types": ["node"] to the tsconfig.app.json

3. Add below lines in polyfills.js

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

Reference : Last answer by @AWS PS (Step 1)
Reference : https://github.com/aws/aws-sdk-js/issues/1271 (Step 2)
Reference : https://github.com/bevacqua/dragula/issues/602 (Step 3)

Comments

[Rushabh Madhu]

I have install the above npm package but still I am facing the same issue.

[Naga]

I am getting could not load runtime compiler while running the App in Andriod