Angular 4 Amazon S3 example – How to upload File to S3 Bucket

Amazon Simple Storage Service (Amazon S3) is object storage built to store and retrieve any amount of data from web or mobile. Amazon S3 is designed to make web-scale computing easier for developers. In this tutorial, we’re gonna create an Angular 4 App that can upload files to Amazon S3 Bucket.

More Practice:
– Angular 4 Amazon S3 example – How to get list Files from S3 Bucket
– Angular 4 Amazon S3 example – How to delete File from S3 Bucket

I. Technology

– Angular 4
– AWS SDK

II. How to do

1. Set up Amazon S3

1.1 Create an IAM user

We need to provide access permission bucket. So follow these step to create an IAM user and get Access key ID and Secret access key:

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

springboot amazon s3 starter - choose user

Input User name, choose Programmatic access for Access type:

amazon s3 starter - add user info

Press Next: Permissions button -> go to Set permissions for jsa-user screen.
Now, choose Attach existing policies directly -> filter policy type s3, then check AmazonS3FullAccess:

amazon s3 starter - add policies

Press Next: Review:

amazon s3 starter - review policies

Press Create user:

Press Download .csv for {Access key ID, Secret access key}.

1.2 Create Amazon S3 Bucket

– Go to https://console.aws.amazon.com/s3, click on Create bucket:

– Input information for creating bucket, then click on Create:

amazon-s3-angular4-create-bucket

1.3 Configure CORS for Bucket

– Click on the Bucket we have just created:

amazon-s3-angular4-configure-bucket

– Choose Permission tab, then CORS Configuration:

amazon-s3-angular4-configure-bucket-cors

– Configure CORS for Bucket, then click on Save button.

2. Install AWS SDK

Run this: npm install aws-sdk.

After installing, we can see aws-sdk inside node-modules folder:

amazon-s3-angular4-install-aws-sdk

3. Use AWS SDK

– import AWS and S3 from aws-sdk:

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

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

– use accessKeyId & secretAccessKey from the step above to construct S3 bucket.
– call S3 bucket upload() method with input params containing Bucket for bucket’s name, Key for full path, Body for data file.

const bucket = new S3(
  {
    accessKeyId: 'YOUR-ACCESS-KEY-ID',
    secretAccessKey: 'YOUR-SECRET-ACCESS-KEY',
    region: 'us-east-1'
  }
);

const params = {
  Bucket: 'jsa-angular4-bucket',
  Key: 'jsa-s3/' + file.name,
  Body: file
};

bucket.upload(params, function (err, data) {
  // ...
});

const bucket = new S3(

{

accessKeyId: 'YOUR-ACCESS-KEY-ID',

secretAccessKey: 'YOUR-SECRET-ACCESS-KEY',

region: 'us-east-1'

}

);

const params = {

Bucket: 'jsa-angular4-bucket',

Key: 'jsa-s3/' + file.name,

Body: file

};

bucket.upload(params, function (err, data) {

// ...

});

III. Practice

1. Project Overview

1.1 Goal

We will build an Angular 4 Firebase App that can help user choose file from local and upload it to Amazon S3 Bucket:

amazon-s3-angular4-demo

1.2 Structure

amazon-s3-angular4-structure

2. Step by step

2.1 Set up Angular 4 Project integrating with AWS SDK

Create your own Angular 4 Project, then follow the steps above to integrate AWS SDK.

2.2 Setup @NgModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormUploadComponent } from './form-upload/form-upload.component';
import { UploadFileService } from './upload-file.service';

@NgModule({
  declarations: [
    AppComponent,
    FormUploadComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [UploadFileService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { FormUploadComponent } from './form-upload/form-upload.component';

import { UploadFileService } from './upload-file.service';

@NgModule({

declarations: [

AppComponent,

FormUploadComponent

imports: [

BrowserModule

providers: [UploadFileService],

bootstrap: [AppComponent]

})

export class AppModule { }

2.3 Upload Service

import { Injectable } from '@angular/core';
import * as AWS from 'aws-sdk/global';
import * as S3 from 'aws-sdk/clients/s3';

@Injectable()
export class UploadFileService {

  FOLDER = 'jsa-s3/';

  constructor() { }

  uploadfile(file) {

    const bucket = new S3(
      {
        accessKeyId: 'YOUR-ACCESS-KEY-ID',
        secretAccessKey: 'YOUR-SECRET-ACCESS-KEY',
        region: 'us-east-1'
      }
    );

    const params = {
      Bucket: 'jsa-angular4-bucket',
      Key: this.FOLDER + file.name,
      Body: file
    };

    bucket.upload(params, function (err, data) {
      if (err) {
        console.log('There was an error uploading your file: ', err);
        return false;
      }

      console.log('Successfully uploaded file.', data);
      return true;
    });
  }

}

import { Injectable } from '@angular/core';

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

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

@Injectable()

export class UploadFileService {

FOLDER = 'jsa-s3/';

constructor() { }

uploadfile(file) {

const bucket = new S3(

{

accessKeyId: 'YOUR-ACCESS-KEY-ID',

secretAccessKey: 'YOUR-SECRET-ACCESS-KEY',

region: 'us-east-1'

}

);

const params = {

Bucket: 'jsa-angular4-bucket',

Key: this.FOLDER + file.name,

Body: file

};

bucket.upload(params, function (err, data) {

if (err) {

console.log('There was an error uploading your file: ', err);

return false;

}

console.log('Successfully uploaded file.', data);

return true;

});

}

2.4 Form Upload Component

form-upload.component.html

<label class="btn btn-default">
  <input type="file" (change)="selectFile($event)">
</label>

<button class="btn btn-success" [disabled]="!selectedFiles" (click)="upload()">Upload</button>

</label>

<button class="btn btn-success" [disabled]="!selectedFiles" (click)="upload()">Upload</button>

form-upload.component.ts

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

@Component({
  selector: 'app-form-upload',
  templateUrl: './form-upload.component.html',
  styleUrls: ['./form-upload.component.css']
})
export class FormUploadComponent implements OnInit {

  selectedFiles: FileList;

  constructor(private uploadService: UploadFileService) { }

  ngOnInit() {
  }

  upload() {
    const file = this.selectedFiles.item(0);
    this.uploadService.uploadfile(file);
  }

  selectFile(event) {
    this.selectedFiles = event.target.files;
  }
}

import { Component, OnInit } from '@angular/core';

import { UploadFileService } from '../upload-file.service';

@Component({

selector: 'app-form-upload',

templateUrl: './form-upload.component.html',

styleUrls: ['./form-upload.component.css']

})

export class FormUploadComponent implements OnInit {

selectedFiles: FileList;

constructor(private uploadService: UploadFileService) { }

ngOnInit() {

}

upload() {

const file = this.selectedFiles.item(0);

this.uploadService.uploadfile(file);

}

selectFile(event) {

this.selectedFiles = event.target.files;

}

2.5 App Component

app.component.html

<div class="container">
	<div style="color: blue; margin-bottom: 20px">
		<h1>{{title}}</h1>
		<h3>{{description}}</h3>
	</div>
 
	<app-form-upload></app-form-upload>
</div>

<h1>{{title}}</h1>

<h3>{{description}}</h3>

</div>

<app-form-upload></app-form-upload>

</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'JavaSampleApproach';
  description = 'Angular4-AmazonS3 Demo';
}

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'JavaSampleApproach';

description = 'Angular4-AmazonS3 Demo';

}

2.6 Check Result

Run the App, go to http://localhost:4200/.

amazon-s3-angular4-demo

After uploading files:
– Console:
amazon-s3-angular4-result-upload

– S3 Bucket https://console.aws.amazon.com/s3/buckets/jsa-angular4-bucket/jsa-s3:
amazon-s3-angular4-result-bucket

IV. Source Code

Angular4AmazonS3-upload-files

By grokonez | January 30, 2018.

Post Tags

36 thoughts on “Angular 4 Amazon S3 example – How to upload File to S3 Bucket”

Prateek says:

March 28, 2018 at 1:32 pm

great article !!! thanks a lot

Reply
Ali says:

March 30, 2018 at 2:14 pm

Thanks, turned hours of work in to 10 mins. Exactly what you want from a tutorial!

Reply
das says:

April 2, 2018 at 8:54 am

big file size issue the uploading files on s3 server. eg. 1GB files size.

Reply
1. Sushil says:
  
  April 24, 2018 at 10:07 am
  
  Any luck on this one? How to tackle this?
  
  Reply

ERROR in node_modules/aws-sdk/clients/acm.d.ts(124,37): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/acm.d.ts(126,38): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/acm.d.ts(460,32): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/acm.d.ts(462,32): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/acmpca.d.ts(271,37): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/acmpca.d.ts(273,38): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/acmpca.d.ts(341,25): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/apigateway.d.ts(1146,23): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/appsync.d.ts(248,23): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/clouddirectory.d.ts(1469,38): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/cloudsearchdomain.d.ts(7,24): error TS2307: Cannot find module ‘stream’.
node_modules/aws-sdk/clients/cloudsearchdomain.d.ts(42,23): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/cloudtrail.d.ts(141,28): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/codecommit.d.ts(634,29): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/codecommit.d.ts(1601,22): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/cognitoidentityserviceprovider.d.ts(2581,31): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/directconnect.d.ts(992,28): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/dms.d.ts(448,35): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/dynamodb.d.ts(482,38): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/dynamodbstreams.d.ts(92,38): error TS2304: Cannot find name ‘Buffer’……..

in your tsconfig.app.json file put this

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": ["node"] <----------the only thing different
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

{

"extends": "../tsconfig.json",

"compilerOptions": {

"outDir": "../out-tsc/app",

"baseUrl": "./",

"module": "es2015",

"types": ["node"] <----------the only thing different

"exclude": [

"test.ts",

"**/*.spec.ts"

]

}

John Best says:

April 26, 2018 at 11:19 pm

This fixed the error for me, thanks for sharing!

Reply
savariraju says:

August 24, 2018 at 1:59 pm

ERROR in ./node_modules/aws-sdk/lib/request.js
Module not found: Error: Can’t resolve ‘jmespath’ in ‘G:\Savari\Website\node_modules\aws-sdk\lib’
ERROR in ./node_modules/aws-sdk/lib/response.js
Module not found: Error: Can’t resolve ‘jmespath’ in ‘G:\Savari\Website\node_modules\aws-sdk\lib’
ERROR in ./node_modules/aws-sdk/lib/resource_waiter.js
Module not found: Error: Can’t resolve ‘jmespath’ in ‘G:\Savari\Website\node_modules\aws-sdk\lib’

Reply

wanderson says:

April 11, 2018 at 5:19 pm

Good article!
I learned easy to upload, thank you
Now I need to download the file. How do you download the file?

Reply
1. JavaSampleApproach says:
  
  April 11, 2018 at 5:29 pm
  
  Hi wanderson,
  
  You can visit this post for reference:
  Angular 4 Amazon S3 example – How to get list Files from S3 Bucket
  
  Regards,
  JSA.
  
  Reply
Mar says:

April 27, 2018 at 11:37 am

Hello,
I need to know if i want to upload to different folders in S3 and I want to make my angular app upload to a specific folder. is such thing can be done?

Reply
hemanth says:

April 28, 2018 at 8:14 am

how could i upload multiple files at once to s3 bucket

Reply
Suneel says:

May 11, 2018 at 6:36 am

Very good article. I am just concerned about security. Is it safe to use secret in Javascript?

Reply
Chen Wang says:

May 12, 2018 at 12:03 am

accessKeyId: ‘YOUR-ACCESS-KEY-ID’,
secretAccessKey: ‘YOUR-SECRET-ACCESS-KEY’,

are exposed to user. Anyone can take these keys and submit anything to your bucket.

How will you prevent that?

Reply
1. Aakash says:
  
  May 12, 2018 at 5:50 pm
  
  Yes this is definitely a security problem with this approach of directly uploading files from the browser aka angular app. Then again you will have to choose whether you want the file to round trip via your server to S3 since that is lets say uploading a 100MB file first to your server and then to S3.
  
  Reply
Ryan says:

May 17, 2018 at 3:56 pm

i would like the component to receive the data object from the bucket.upload callback function. do you have any thoughts/guidance on this?

Reply
Ankush says:

May 18, 2018 at 5:29 am

Hello Sir,
Thanks for your explanation.

I am getting the following error message when I try to upload using the aws-sdk in my angular 2 code.

zone.js:2935 OPTIONS https://lifelab-assets-main.s3.amazonaws.com/consent-form/abc.pdf 403 (Forbidden)

Failed to load https://lifelab-assets-main.s3.amazonaws.com/consent-form/abc.pdf: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access. The response had HTTP status code 403.

There was an error uploading your file: Error: Network Failure

Please help me how to resolve this issue.

Thanks
Ankush

Reply
1. JavaSampleApproach says:
  
  May 18, 2018 at 8:22 am
  
  Hi Ankush,
  
  Please make sure that you’ve done this step: Configure_CORS_for_Bucket.
  
  Regards,
  JSA.
  
  Reply
Saransh says:

May 18, 2018 at 3:54 pm

Is there any tutorial for doing the above using AWS Cognito for authentication?

Reply
Darryl Deschene says:

May 24, 2018 at 2:44 pm

Hello

This works for me but only with smaller files.

I get a 403 (Forbidden) error then a CORS error to do with preflight
Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access. The response had HTTP status code 403.

But it works with small files (<2mb)

What am I doing Wrong?

Reply
Shekhar Ramola says:

May 25, 2018 at 9:34 pm

Hi, I have to upload at the below path domain_name/bucket_name/file_name i.e., https://s3.amazonaws.com/bucket_name/file_name and by your approach I am uploading at https://bucket_name.s3.amazonaws.com/file_name

How can I fix that? thanks.

Reply
sumit says:

May 31, 2018 at 7:11 am

Hello,
This works for me but i want add user defined meta data for uploaded file can you please help me with that

Reply
sumit says:

May 31, 2018 at 7:12 am

Nice tutorial,
This works for me but i want add user defined meta data for uploaded file can you please help me with that

Reply
Dipesh says:

June 13, 2018 at 5:13 pm

index.js:43 Uncaught ReferenceError: global is not defined
at Object../node_modules/buffer/index.js (index.js:43)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/aws-sdk/lib/browserHashUtils.js (browserHashUtils.js:1)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/aws-sdk/lib/browserHmac.js (browserHmac.js:1)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/aws-sdk/lib/browserCryptoLib.js (browserCryptoLib.js:1)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/aws-sdk/lib/browser_loader.js (browser_loader.js:4)
at __webpack_require__ (bootstrap:76)

Reply
1. Robb Sadler says:
  
  June 27, 2018 at 2:31 pm
  
  If you look at the aws github bug here: https://github.com/aws/aws-amplify/issues/678 this error is reported as an issue when the library is installed in Angular 6.
  
  Adding this line to polyfill.js will alleviate the issue until Angular 6 is able to resolve the base problem.
  
  (window as any).global = window;
  
  They (Angular) are attempting to deprecate global, so the answer may actually be in an update to aws-sdk. This stopgap worked perfectly for me.
  
  Reply
2. Robb Sadler says:
  
  June 27, 2018 at 2:35 pm
  
  https://github.com/aws/aws-amplify/issues/678 addresses this issue. It is specific to Angular 6, where they are working toward deprecating global.
  
  A workaround is mentioned on that ticket (that worked for me) to add the following line to your polyfills.ts:
  
  (window as any).global = window;
  
  Reply
  1. swetha says:
    
    September 11, 2018 at 12:24 pm
    
    Thanks a lot it working fine for me
    
    Reply
Antony Serralta says:

June 28, 2018 at 6:41 pm

I have this error when I tried to use this example Cannot read property ‘Stream’ of undefined and download your example and use my credentials and it work, but with angular 6 is not.

Reply
santhosh kumar says:

July 10, 2018 at 7:02 am

ERROR in node_modules/aws-sdk/clients/acm.d.ts(132,37): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/acm.d.ts(134,38): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/acm.d.ts(468,32): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/acm.d.ts(470,32): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/acmpca.d.ts(283,37): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/acmpca.d.ts(285,38): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/acmpca.d.ts(353,25): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/apigateway.d.ts(1146,23): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/appsync.d.ts(248,23): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/clouddirectory.d.ts(1573,38): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/cloudsearchdomain.d.ts(7,24): error TS2307: Cannot find module ‘stream’.
node_modules/aws-sdk/clients/cloudsearchdomain.d.ts(42,23): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/cloudtrail.d.ts(141,28): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/codecommit.d.ts(634,29): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/codecommit.d.ts(1601,22): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/cognitoidentityserviceprovider.d.ts(2581,31): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/directconnect.d.ts(992,28): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/dms.d.ts(448,35): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/dynamodb.d.ts(498,38): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/dynamodbstreams.d.ts(92,38): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/ec2.d.ts(3074,23): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/ecr.d.ts(767,31): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/firehose.d.ts(182,22): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/glacier.d.ts(7,24): error TS2307: Cannot find module ‘stream’.
node_modules/aws-sdk/clients/glacier.d.ts(1313,24): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/iam.d.ts(1120,32): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/iam.d.ts(3118,35): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/iot.d.ts(4487,27): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/iotanalytics.d.ts(1007,32): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/iotdata.d.ts(73,30): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/iotdata.d.ts(74,25): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/kinesis.d.ts(237,22): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/kinesisvideoarchivedmedia.d.ts(7,24): error TS2307: Cannot find module ‘stream’.
node_modules/aws-sdk/clients/kinesisvideoarchivedmedia.d.ts(121,25): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/kinesisvideomedia.d.ts(7,24): error TS2307: Cannot find module ‘stream’.
node_modules/aws-sdk/clients/kinesisvideomedia.d.ts(53,25): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/kms.d.ts(328,32): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/kms.d.ts(962,31): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/lambda.d.ts(7,24): error TS2307: Cannot find module ‘stream’.
node_modules/aws-sdk/clients/lambda.d.ts(372,23): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/lambda.d.ts(373,28): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/lexmodelbuildingservice.d.ts(306,23): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/lexruntime.d.ts(7,24): error TS2307: Cannot find module ‘stream’.
node_modules/aws-sdk/clients/lexruntime.d.ts(35,28): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/mediastoredata.d.ts(7,24): error TS2307: Cannot find module ‘stream’.
node_modules/aws-sdk/clients/mediastoredata.d.ts(199,29): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/mobile.d.ts(106,26): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/polly.d.ts(8,24): error TS2307: Cannot find module ‘stream’.
node_modules/aws-sdk/clients/polly.d.ts(70,29): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/rekognition.d.ts(1135,27): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/s3.d.ts(11,24): error TS2307: Cannot find module ‘stream’.
node_modules/aws-sdk/clients/s3.d.ts(787,22): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/s3.d.ts(1151,42): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/s3.d.ts(3347,15): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/s3.d.ts(3553,32): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/sagemakerruntime.d.ts(24,26): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/secretsmanager.d.ts(627,34): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/ses.d.ts(1513,32): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/sns.d.ts(275,24): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/sqs.d.ts(216,24): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/ssm.d.ts(4954,48): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/support.d.ts(336,22): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/waf.d.ts(628,39): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/clients/wafregional.d.ts(672,39): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/lib/config.d.ts(1,34): error TS2307: Cannot find module ‘http’.
node_modules/aws-sdk/lib/config.d.ts(2,35): error TS2307: Cannot find module ‘https’.
node_modules/aws-sdk/lib/dynamodb/document_client.d.ts(2,25): error TS2307: Cannot find module ‘stream’.
node_modules/aws-sdk/lib/dynamodb/document_client.d.ts(93,30): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/lib/dynamodb/document_client.d.ts(274,38): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/lib/event-stream/event-stream.d.ts(1,55): error TS2503: Cannot find namespace ‘NodeJS’.
node_modules/aws-sdk/lib/http_response.d.ts(1,25): error TS2307: Cannot find module ‘stream’.
node_modules/aws-sdk/lib/http_response.d.ts(14,18): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/lib/request.d.ts(1,25): error TS2307: Cannot find module ‘stream’.
node_modules/aws-sdk/lib/request.d.ts(132,45): error TS2304: Cannot find name ‘Buffer’.
node_modules/aws-sdk/lib/services/glacier.d.ts(10,28): error TS2304: Cannot find name ‘Buffer’.

Getting this error on console can someone help!

Reply
Santhosh Dalave says:

July 10, 2018 at 7:40 am

how to restrict to upload only xls file. ??

Reply
sumit says:

July 17, 2018 at 7:49 am

hey when i’m trying to upload file it gives 400 bad request erroe and then upload the file to aws

Reply
Dee says:

July 23, 2018 at 2:01 pm

Hey All,

I got that buffer error, I did “types”: [“node”], but now I’m getting

ERROR in ../node_modules/aws-sdk/lib/event_listeners.js
Module not found: Error: Can’t resolve ‘util’ in ‘C:\Users\Deepak D\Pictures\ngUpload\node_modules\aws-sdk\lib’

What’s going wrong? I’m using angular 6.

Reply
Nick says:

July 25, 2018 at 1:54 pm

Hello,
Thanks for a great tutorial.

But I think making ACCESS_KEY and SECRET_KEY exposed like this then it can a security disaster later. I just want to know how can we not put the keys out in the open and put it in the emvironment variables AWS.

Thank you.

Reply
1. Dewanshu Singh says:
  
  September 17, 2018 at 2:20 pm
  
  You can define them in your config file and get them by using secured service.
  
  Reply
swetha says:

September 11, 2018 at 1:03 pm

great article !!! thanks a lot

Reply
Dewanshu Singh says:

September 17, 2018 at 2:18 pm

Thanks Man !!!! Saved lots of time 🙂

Reply