Showing an image from AWS S3 in Angular 6

Hey there! I recently started working with Angular 6 and I've encountered an issue trying to fetch images, documents, or Excel files from an AWS S3 bucket. Here's the code I'm using:

var S3 = new AWS.S3();
    const params = {
      Bucket: 'asdasd',
      accessKeyId: '[accessKeyId]',
      secretAccessKey: '[secretAccessKey]',
      
    }

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

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

      const fileDatas = data.Contents;

      fileDatas.forEach(function (file) {
        
      });
    });

I encountered this error message:

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

My goal is to retrieve images from S3 and display them on my HTML page.

Answer ā„–1

The issue at hand arises from utilizing invalid parameters in your API calls - the SDK is unable to interpret region, accessKeyId, and secretAccessKey:

const params = {
  Bucket: 'asdasd',
  region: 'asadas1',                      // Here,
  accessKeyId: '[accessKeyId]',  // here
  secretAccessKey: '[secretAccessKey]',      // and here

}

Please refer to the listObjects API documentation for guidance.

It appears that your SDK setup may be incorrect, kindly review the documentation for proper configuration:

Note: Embedding security credentials within Client-Side JS frameworks like Angular is highly discouraged as it poses a security risk. The provided documentation offers safer alternatives.


If against all best practices(which should not be overlooked), you wish to proceed, here's how you could potentially tackle it:

Define your AWS details at the onset of your script as outlined here:

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

Reiterating once more, hard-coding credentials in client-side code presents substantial risks!

Answer ā„–2

You should consider giving the multer-s3 package in npm a try. I personally have had success using it.

IMPORTANT TIP: It is crucial that you never share your AWS key ID and secret ID publicly like this. Delete this information from your post immediately or deactivate your access key for security purposes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Activate the function when the @Input() is modified

In my parent component, I have the following code in the parent.component.html: <app-child [idElement]=(idElement)></app-child> The child component has an input parameter defined as follows: @Input() idElement : number; Additionally, there ...

What is the most effective method for waiting for multiple requests to complete?

I am working on a component that requires fetching data from multiple endpoints through independent API calls. I want to make all these calls simultaneously and only load the user interface once all the data has been fetched successfully. My approach invo ...

There was an issue: Control with the name 'name' could not be located

Whenever I submit the form and try to go back, an error pops up saying "ERROR Error: Cannot find control with the name: 'name'". I'm not sure what I might be missing. Do I need to include additional checks? Below is my HTML file: <div ...

Having difficulty transmitting POST requests from Clerk to Vercel

I'm currently working on integrating a webhook into my project for Clerk app\api\webhooks\route.ts import { Webhook } from "svix"; import { headers } from "next/headers"; import { WebhookEvent } from "@clerk/ne ...

Understanding how to use TypeScript modules with system exports in the browser using systemjs

Iā€™m facing an issue while using systemjs. I compiled this code with tsc and exported it: https://github.com/quantumjs/solar-popup/blob/master/package.json#L10 { "compilerOptions": { "module": "system", "target": "es5", "sourceMap": true, ...

How to Navigate Between Pages and Push to Tab Pages with Ionic 3 and Angular 4

Currently, I am encountering an issue with transitioning from a Login screen designed as a normal page to a Tab-based Home screen in my application. Despite verifying valid credentials, I have been unable to successfully navigate to the desired Tab-based ...

Struggling to navigate through rows in a Material UI Table

After performing a search in my TextField, the rows appear correctly in the console. However, the table itself does not update at all. I attempted to set the result of the search to a new array, but this made my TextField read-only. Any assistance with fur ...

What are the steps to turn off the color display of the "ng build" command?

Is there a method to deactivate the colorized output of the Angular CLI ng build command? Specifically, I am looking to disable the colorful summary that is displayed on the console upon completion. I'm hoping for a solution such as an environment var ...

Angular OpenID: Ensure user authentication before rendering application in web browser

Currently working with Angular 12 and utilizing angular-oauth2-oidc. Authentication has been set up successfully, but there is a brief moment where the application loads before redirecting to the login page. Is there a method to completely hide the app u ...

Passing data from a container component to a Redux Form component in React with TypeScript

One of my Form container components looks like this: class PersonalDetailContainer extends React.Component<PropTypes> { onSubmit = async (fields: PersonalFields) => { this.props.savePersonalDetail(fields); }; render(): JSX.Element { ...

The complete Angular 2 application fails to load when accessed using a custom domain name

I've been struggling for the past few days trying to solve a strange issue. When I try to access my Angular 2 app using a domain name (example.com), it gets stuck on the loading screen. However, if I try accessing the same app without nginx, it loads ...

Encountering an issue with Typescript React application when utilizing the latest `satisfies` operator in TS 4.9.3

I attempted to incorporate the new satisfies operator in my Typescript React application, but unfortunately, it is not functioning as expected. Here is a glance at the details of the package.json and relevant typescript packages. { "dependencies& ...

Eliminate elements from an array using a specific key for filtering

My Array is called MainArray MainArray=[{ {First Name: "First Name"}, {Last Name: "Contact"}, {Last Name: "Contact"} ] I am trying to trim the key-value pair from this array like this: if (key == 'First Name') { del ...

Angular breadcrumb component for creating a sidebar menu navigation

I am looking to enhance my sidebar menu with breadcrumb navigation. The menus currently include Menu1 and Menu2, each containing submenus such as subMenu1 and subMenu2. When a user clicks on Menu2, I want the breadcrumb trail to display as Home > Menu2 ...

Guide on triggering a function with the Enter key in Angular 9

A button on my Angular component currently triggers a method with a (click) event, but I also want the same method to be triggered if the user presses the enter key in the input box. This gives the user flexibility. Below is the HTML code for the input an ...

Is there a way to modify a suffix snippet and substitute the variable in VS Code?

While working on my Java project in VS Code, I stumbled upon some really helpful code snippets: suffix code snippets Once I type in a variable name and add .sysout, .cast, or similar, the snippet suggestion appears. Upon insertion, it translates to: res ...

Strategies for obtaining multiple instances of duplicated data within an array object

this array contains multiple instances of duplicate data var = [{id: 1, name:'jeff'}{id:1, name:'kent'}{id:2, name:'ynez'}{id:2, name:'cloe'}{id:3, name:'Ron'}{id:3, name:'chester'}] to achieve ...

creating a toolbar with content using Ionic framework

I currently have a toolbar implemented on my webpage. I want to show different content on the same page based on the user's selection from the toolbar. How can I make use of Ionics to achieve this functionality? <ion-toolbar no-border-top> < ...

The Forge Viewer's getState() function is providing inaccurate values for individual items

In our Angular application, we have integrated the latest version of Forge Viewer and are storing the current state of the viewer in our database for future restoration. After thorough testing, we discovered that isolated nodes are not being saved correct ...

Transitioning Angular from TSLint to ESLint: Addressing the Banana-In-Box Issue

Encountering major hurdles during the transition from TSLint to ESLint for my Angular project. I've set up a new project (currently in Angular 9) and then proceeded to upgrade to Angular 10.2. Following the instructions outlined in the @angular-eslint ...