javascript - How do I preview an image via a presigned S3 URL in React? - Stack Overflow

admin管理员组

文章数量:1394578

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

.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: 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?

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

https://our-namespace.s3.amazonaws./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./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?

• javascript
• node.js
• reactjs
• amazon-web-services
• amazon-s3

Share Improve this question Follow edited Oct 14, 2021 at 19:13 Ermiya Eskandary 23.8k33 gold badges5252 silver badges6565 bronze badges asked Oct 14, 2021 at 16:33 NoobNoob 1,04444 gold badges1515 silver badges3434 bronze badges 19

• Is the correct content-type set for the underlying S3 object? What does your browser do for other PDFs? – jarmod Commented Oct 14, 2021 at 16:35
• 1 The response headers from AWS are the issue. AWS sends the "Content-Type: application/octet-stream", but you need "Content-Type: application/pdf" – Vladimir Jovanović Commented Oct 14, 2021 at 16:36
• @jarmod @Unigazer I accidentally used the wrong url format for the S3 link. I just updated it in the question - do your ments still apply? If so, how can I make AWS send the content-type as application/pdf? And how do you know it's ing in as application/octet-stream? I'm unsure how to view this – Noob Commented Oct 14, 2021 at 16:43
• Yes, the content type matters. This dictates how the downloaded file is presented to the user agent. All SDKs and the awscli allow the uploader to indicate the content type. – jarmod Commented Oct 14, 2021 at 16:45
• 1 All of this talk of proxies and coding solutions shouldn't be necessary. S3 objects can have Content-Type metadata. Go set this correctly on an uploaded PNG and on a PDF, then generate pre-signed URLs for each, then invoke those URLs in your browser. Your browser can then choose to display/preview the file rather than download it. Note: if you upload files through the AWS S3 Console, it will typically assign the correct Content-Type, so you don't have to. – jarmod Commented Oct 14, 2021 at 17:02

 |  Show 14 more ments

1 Answer 1

Sorted by: Reset to default 5

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.

本文标签： javascriptHow do I preview an image via a presigned S3 URL in ReactStack Overflow