net::ERR_NAME_NOT_RESOLVED while uploading picture to s3 bucket

Question

I am using angular to create my application. Am trying to upload a picture to s3 bucket but everytime i try uploading it, this error shows in my console.

Here's my upload.service.ts file code

  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;
      }
    });
  }
}

the access key and secret access key are statically typed in my code so don't worry about it. i just changed those to the variable names because of security issues while posting this question to stack overflow.

Any help would be appreciated.

Answer 1

Though this does not answer your initial question, as Marcin said with your AWS credentials, hard-coding them into your code is very bad practice and should be avoided at all costs. For frontend applications, this can be performed by having a simple API endpoint generate you a signed upload URL to the S3 bucket:

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

To actually answer your question , you are likely seeing the error because the region you are passing is incorrectly formatted.

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

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