Angular 6 display image fetched from AWS S3

Question

I am new on Angular 6 and stuck in a problem to get the image/doc/excel file from aws S3 bucket.

Here is my code:

var S3 = new AWS.S3();
    const params = {
      Bucket: 'asdasd',
      region: 'asadas1',
      accessKeyId: 'SADIYIUYSADSA8768GHSAD',
      secretAccessKey: 'sdas+sadJSADH7',

    }

    S3.listObjects(params, function (err, data) {
      if (err) {
        console.log('There was an error getting your files: ' + err);
        return;
      }

      console.log('Successfully get files.', data);

      const fileDatas = data.Contents;

      fileDatas.forEach(function (file) {

      });
    });

I got error:

MultipleValidationErrors: There were 3 validation errors:
* UnexpectedParameter: Unexpected key 'region' found in params
* UnexpectedParameter: Unexpected key 'accessKeyId' found in params
* UnexpectedParameter: Unexpected key 'secretAccessKey' found in params

I want to fetch images from s3 and display them on my HTML page.

Answer 1

The problem is, that you used invalid Parameters to your API calls - the SDK doesn't know what to do with region , accessKeyId and secretAccessKey :

const params = {
  Bucket: 'asdasd',
  region: 'asadas1',                      // Here,
  accessKeyId: 'SADIYIUYSADSA8768GHSAD',  // here
  secretAccessKey: 'sdas+sadJSADH7',      // and here

}

Please see the listObjects API Documentation for reference.

Apparently your SDK isn't set up in the correct way, please see the documentation on how to do that.

• Documentation for Server-Side JS-Code
• Documentation for Client-Side JS-Code - ie Angular

Note: If you're using a Client-Side JS-Framework such as Angular, it is a terrible idea to hard-code security credentials! Your users will be able to see those and use them to access other resources. The documentation I linked above shows you better options.

---

If you want to ignore Best Practices, which you absolutely shouldn't , this is how you could do it:

Set your AWS information at the beginning of your script as documented here :

AWS.config.update({
    region: 'us-east-1',
    accessKeyId: "Don't do this",
    secretAccessKey: "It's a terrible idea!"
});

Just to reiterate, it's a terrible idea to hard-code credentials in client-side code!

Answer 2

Try multer-s3 package in npm. I am using it and it works fine.

TIP: DO NOT EVER SHARE YOUR AWS KEY ID AND SECRET ID LIKE THIS... I REPEAT. DO NOT!!!!!.. Delete this post or make your access key inactive.