"encountered net::ERR_NAME_NOT_RESOLVED error when trying to upload image to s3 storage

I am currently developing an application using Angular. I have been attempting to upload a picture to my S3 bucket, but each time I try, I encounter this error in the console.

https://i.stack.imgur.com/qn3AD.png

Below is the code snippet from my upload.service.ts file:

  uploadBarcode(file: any) {
    const uniqueId: number = Math.floor(Math.random() * Date.now());
    const file_name: string = 'lab_consignments/'+uniqueId + "_" + file.name ;
    const contentType = file.type;
    console.log(contentType)
    const bucket = new S3(
      {
        accessKeyId: myAccessKey,
        secretAccessKey: secretAccessKey,
        region: 'Asia Pacific (Mumbai) ap-south-1'
      }
    );
    const params = {
      Bucket: 'chc-uploads',
      Key: file_name,
      Body: file,
      ACL: 'public-read',
      ContentType: contentType
    };

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

      }
      else {
        console.log('Successfully uploaded file from service');
        return true;
      }
    });
  }
}

Please note that the access key and secret access key mentioned in the code are not the actual values, as I have replaced them with variable names for security reasons while posting on Stack Overflow.

I would greatly appreciate any assistance provided.

Answer №1

While the information provided may not directly address your original query, it is important to note that hard-coding AWS credentials in your code is considered a risky practice, as highlighted by Marcin. For frontend applications, a more secure approach would involve utilizing an API endpoint to generate a signed upload URL for the S3 bucket:

https://aws.amazon.com/blogs/developer/generate-presigned-url-modular-aws-sdk-javascript/

In relation to your specific question, it appears that the error you are encountering may be due to the incorrect formatting of the region parameter:

    const bucket = new S3(
      {
        region: 'ap-south-1'
      }
    );

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Config.html#region-property

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

Unclear on the usage of "this" in arrow functions?

After going through various discussions and articles on this topic, I find myself still perplexed about the meaning of this in arrow functions. I've been encountering run-time errors with a code snippet similar to the following: export class Foo imp ...

Can you identify the issue within this code that combines HTML5, CSS, and JavaScript?

I'm attempting to create a feature where, upon clicking a button, a hidden div will be revealed. However, my current implementation doesn't seem to be working. function reload(){ window.reload(); } function vis(x,z,a){ var xpar = docu ...

Issue with installing vscode-ripgrep during VSCode build/run process

After attempting to build and run VSCode on my Ubuntu 17.10 by following the instructions from this guide: https://github.com/Microsoft/vscode/wiki/How-to-Contribute#build-and-run, I encountered an issue when installing dependencies using yarn. The error m ...

Streamlined [JavaScript?] solution for displaying and modifying several location-specific purchasing and selling rates

No, this is not related to interviews or cryptocurrencies! :) It is for a non-profit personal web application designed to enhance a game. This question involves both finance and coding. I am developing this web app using Vue.js, so I prefer a JavaScri ...

using the useEffect hook to create a loop that runs infinitely

For my project, I am working on updating data in firebase. The issue that I'm facing is that the data seems to be constantly looping, causing potential crashes. Is there a way to stop this loop and prevent any crashing? import "./App.css"; ...

How can I populate a form in Meteor with data from a MongoDB collection that was previously inserted?

Recently, I completed constructing a lengthy form field where users can enter a plethora of information. This form consists of various text and number fields, radio button sets, and checkbox groups. The data is successfully saved in a Mongo collection with ...

Typescript controller inheritance leading to Error: $injector:unpr Unknown Provider due to minification

LATEST UPDATE: 2019/07/16 The issue I am facing is actually a result of misusing $inject. Instead of declaring it as private $inject in api-service.ts, it should have been public static $inject = [...]. During the minification process, explicit injection ...

Having trouble with @here/maps-api-for-javascript in Next.js - it's not functioning

Can anyone help me understand why @here/maps-api-for-javascript is not functioning properly in my Next.js application and producing the following error message: import H from "@here/maps-api-for-javascript"; export default H; ^^^^^^ SyntaxErr ...

Node.js: retrieving a webpage and waiting for it to load before extracting data

Is it possible to scrape a webpage using just node.js without relying on other libraries like phantom.js? That is the question I have been pondering lately. In my code below, I am requesting a webpage with request and then using cheerio to extract data by ...

What is the proper way to utilize the 'shallow: true' parameter when using 'router.replace' in the latest version of Next.js?

Is there a workaround for using shallow: true with router.replace? I am currently working on Next 13 and have not been able to find any solution that replicates the behavior of shallow. I'm looking for a way to achieve the same result as using shallo ...

Generating intricate JSON structures with JavaScript programming instructions

In the world of JSON, I am still a novice. I need to use JavaScript to construct the JSON structure below, but I'm struggling with adding the second element ("12101") and populating the people in the JSON Structure. Below is the code I tried, however, ...

What is the best way to hide only the rows in a table when it is clicked using JavaScript?

Is there a way to hide rows in these tables by clicking on the table head? I'm currently using bootstrap 5 so JQuery is not an option. <table class="table table-info table-bordered"> <thead id="tablea"> ...

Angular - Issue with setting default value in a reusable FormGroup select component

My Angular reusable select component allows for the input of formControlName. This input is then used to render the select component, and the options are passed as child components and rendered inside <ng-content>. select.component.ts import {Compon ...

Customize Column Headers in Handsontable: A Quick Guide

Is there a way to customize the appearance of column headers in handsontable? I have provided a jsfiddle example to showcase my current progress. While I am able to format the first row of data and change the column titles, I am facing difficulty in forma ...

What causes an error when attempting to add a new user to the database?

Currently, I am delving into the world of Mongodb. To kick things off, I initiated by executing npm install --save mongoose uuid within the confines of Terminal. The primary objective of my project revolves around storing user information in the database. ...

"RecognitionAudio variable missing" and "InactiveRpcError occurred" [Utilizing the Google text-to-speech API]

I have a goal I'd like to achieve. A user communicates with a web browser. The web browser records the user's voice as a WAV file using Recorder.js and sends it to a server running on Google App Engine Standard environment with Python 3.7. The ...

Is it possible to utilize a JSON file to input events into FullCalendar that can accommodate multiple users?

Here's how I'm integrating event information from my database with FullCalendar using PHP: Retrieve event information from the database. Organize the data into an array and customize formatting, colors, etc. Convert the array to JSON format usi ...

Tips for configuring TypeScript in a monorepo to successfully compile private packages

I have configured a monorepo using turborepo that includes Nestjs for the backend and Nextjs for the frontend. To reuse prisma definitions, I separated them into their own package with its own tsconfig. In the index file of my database package where prism ...

MongoDB: Issue updating the 'role' field of a document

Recently, I've run into an issue where I am unable to update the 'role' of a specific document. The document in question is a 'user' object within the MEANjs User schema, and it has a pre-defined property for roles. Here is the sec ...

Creating global variables in NodeJS allows you to access and modify data

Currently, this construct is being utilized to create a global LOG: declare global { let LOG: Logger; } // eslint-disable-next-line @typescript-eslint/no-namespace declare namespace globalThis { let LOG: Logger; } globalThis.LOG = new Logger(); It f ...