2

I'm hosting my data in an Amazon S3 bucket. My client wants to see the link directly in the browser instead of downloading it, someone knows how to edit this from within the account. https://s3.ap-southeast-1.amazonaws.com/faceangiang/uploads/photos/2021/06/fag_25852ed53ec643754a1b5ff366d55128.png

smac2020
  • 9,637
  • 4
  • 24
  • 38
Sang Phan
  • 21
  • 1

2 Answers2

3

If we grab the header for the URL, we can see that the content-type of the image is application/octet-stream

curl -X HEAD -I https://s3.ap-southeast-1.amazonaws.com/faceangiang/uploads/photos/2021/06/fag_25852ed53ec643754a1b5ff366d55128.png

Giving the response of:

HTTP/1.1 200 OK
x-amz-id-2: Vjf6IS4POj2NMre0IJaHZeQMcJyFd/AMgFl77kK5sdWZakpfSHUeycZj1/8619C3rArd3QKunwk=
x-amz-request-id: JSW0VBMFXDDKFJGZ
Date: Sat, 26 Jun 2021 08:40:37 GMT
Last-Modified: Sat, 26 Jun 2021 08:10:49 GMT
ETag: "82dfa35719adef79821b4e0f90c74ab7"
Accept-Ranges: bytes
Content-Type: application/octet-stream
Server: AmazonS3
Content-Length: 169464

In order for an image to be displayed by your browser you have to set the content type to be something like image/png.

The content type can be set when we upload an image using PutObject.

Also, there are ways to change to content type for existing images in a bucket according to this answer:

aws s3 cp \
       s3://BUCKET-NAME/ \
       s3://BUCKET-NAME/ \
       --exclude '*' \
       --include '*.png' \
       --no-guess-mime-type \
       --content-type="image/png" \
       --metadata-directive="REPLACE" \
       --recursive

This will change the content type recursively for all .png images.

Ervin Szilagyi
  • 14,274
  • 2
  • 25
  • 40
  • Where do I need to add it inside aws s3. Thanks – Sang Phan Jun 26 '21 at 08:58
  • As I said you set the content type when you upload the image depending on what language/library you use. The command given above can be executed using AWS-CLI in your terminal. If you want to change the content type form the AWS console, see the answer from @John Rotenstein. – Ervin Szilagyi Jun 26 '21 at 09:01
1

It sounds like the object was uploaded to Amazon S3 without any identification as to the content type.

If you navigate to the object in Amazon S3 and look at the Metadata, it should be showing the Content-Type as image/png:

Content type

This tells the web browser the type of file that is being retrieved. If this is missing, the browser will download the file instead. (Well, it actually downloads it in both situations, but if it knows the file is a png it will display it rather than offering to save it to disk.)

The Content-Type can be provided when a file is uploaded to S3. If you upload via the management console or the AWS CLI, it is automatically set for you.

John Rotenstein
  • 241,921
  • 22
  • 380
  • 470
  • I'm not an expert, what should I do from within AWS S3. Thanks – Sang Phan Jun 26 '21 at 08:59
  • For any existing objects, you'll need to add the Metadata (like shown above) so that the web browser knows what is being downloaded. For any future objects you upload, you'll need to specify the Metadata as part of the upload. How are the files being uploaded to S3? – John Rotenstein Jun 26 '21 at 09:45