in my react app i am trying to download an image from an S3 URL using following code.

<a href={ele.payment_receipt} download target="_blank" class="text-link-3 fw-3 ">
                        <i class="icon-download mr-2"></i>Download</a>

where ele.payment_receipt is the link of file. but when i click on the link it opens it new tab instead of downloading it. I have tried online solutions but all online solutions tell the same method to download can anyone tell me what i am doing wrong here? thanks in advance

EDIT URL of the image is the SignedUrl of an s3 bucket image which expires after 60 seconds.

in my react app i am trying to download an image from an S3 URL using following code.

<a href={ele.payment_receipt} download target="_blank" class="text-link-3 fw-3 ">
                        <i class="icon-download mr-2"></i>Download</a>

where ele.payment_receipt is the link of file. but when i click on the link it opens it new tab instead of downloading it. I have tried online solutions but all online solutions tell the same method to download can anyone tell me what i am doing wrong here? thanks in advance

EDIT URL of the image is the SignedUrl of an s3 bucket image which expires after 60 seconds.

• javascript
• reactjs
• download

Share Improve this question Follow edited Jan 7, 2020 at 9:01 Shoaib Iqbal asked Jan 7, 2020 at 8:29 Shoaib IqbalShoaib Iqbal 2,74055 gold badges2828 silver badges5353 bronze badges 4

• try removing target="_blank" – Hardik Chaudhary Commented Jan 7, 2020 at 8:44
• @HardikChaudhary now it's opening the image in same tab instead of new tab – Shoaib Iqbal Commented Jan 7, 2020 at 8:49
• working example: w3schools./tags/tryit.asp?filename=tryhtml5_a_download – Hardik Chaudhary Commented Jan 7, 2020 at 8:52
• @HardikChaudhary that example wont work for different origin urls reference – uday Commented Jan 7, 2020 at 9:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

For your information, Firefox and Chrome 65+ only support same-origin download links, probably as a security measure.

The Web Hypertext Application Technology Working Group (WHATWG) also remends that the web server that is hosting the image/file in question needs to send a Content-Disposition HTTP header for download= to be honored.

In short:

You can only use to force download of an image/file, if:

the server that hosts the image/file also says it should be downloaded, or the image/file es from the same domain.

Please check whether from the server Content-Disposition header is ing from the server or not. Hope this helps.

You cannot use download attribute to download files which are in different URL(cross-origin) for more information you can refer

Instead what you can do is, make an API call, convert it to blob and download it. You can refer this how to do that gist and working-codesandbox-sample.

A simple ponent to download data from a client-side cache (e.g. flux, redux).

Design to be used with browserify or webpack.

Install with:

npm i react-download-link

import DownloadLink from "react-download-link";

<DownloadLink
    label="Save"
    filename="myfile.txt"
    exportFile={() => "My cached data"}
/>