How do I preview an image via a presigned S3 URL in React?

Question

I have an AWS presigned download URL with a 20 second expiration:

https://our-namespace.s3.amazonaws.com/documents/7443912/ffb9bbc5-5f4f-4315-a4e8-418bc31dbef2.png?X-Amz-Security-Token=123&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20211007T004004Z&X-Amz-SignedHeaders=host&X-Amz-Expires=20&X-Amz-Credential=ASIA4SLAKW7L216GHWOI%2F20278006%2Fus-east-1%2GF3%2Faws4_request&X-Amz-Signature=123

When I load this URL in the browser, it forces a download. I'm looking for a way to display this as an image preview within the browser - instead of initiating a file download.

My initial thought was to convert this URL into a blob and then display that blob in an image preview modal. The only issue is, I'm unsure how to do that. I found the following package: https://www.npmjs.com/package/rn-fetch-blob but it looks like this is no longer maintained.

What would be the optimal way of displaying an image as a preview from the AWS download only link?

Answer 1

You need to set the correct Content-Type for each object in S3, for example application/pdf or image/png.

You can do this when uploading the object, or you can use the AWS S3 Console to modify it afterwards. Note that Content-Type is considered metadata.

Setting the correct Content-Type on the object means that when the object is served by S3 or CloudFront, that Content-Type will be conveyed to the client, allowing it to decide to display or download, as appropriate.