Tuesday, June 18, 2024

 

Unable to view an image/files in S3 in the browser


It looks like you are trying to view the image in browser.

For that, you need to

  1. Open the S3 object in your AWS.
  2. Go to the properties of the S3 object.
  3. Go to Metadata section.
  4. There will be a property called Content-Type. It's initial value might be binary/stream. Change that to the type of image like image/jpegimage/png or application/pdf (if you are dealing with pdf files) etc.

Now you should be able to view the image or file in the browser tab instead of downloading.


6

Before you download a file using generated web URL, you need to apply public permissions using "bucket policy" tool.
In order to apply the bucket policy, perform the following steps:

  1. Open S3 management console https://console.aws.amazon.com/s3/
  2. Choose a bucket, click "Permissions", click "Bucket policy".
  3. Apply the policy using AWS policy generator.

You have to apply policy for GetObject.
Note:This will give download permission to everyone who have got the link.

A sample policy would look like this

{
"Id": "PolicyID",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "StmtID",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>",
      "Principal": "*"
    }
  ]
}

Edit after @mondyfy answer the policy would be

   {
      "Id": "PolicyID",
      "Version": "2012-10-17",
      "Statement": [
        {
          "Sid": "StmtID",
          "Action": [
            "s3:GetObject"
          ],
          "Effect": "Allow",
          "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*",
          "Principal": "*"
        }
      ]
    }



Use below Policy also

{
"Version": "2012-10-17",
"Statement": [
    {
        "Sid": "PublicRead",
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*"
    }
   ] 
 }

Note: In order to view any bucket object in the browser we need to make sure that we have to set Content-Type of media that the browser needs to render and object or bucket should have public read access.

No comments:

Post a Comment