CODEWITHSUNDEEP
javascriptreactjsdownload
Shoaib Iqbal
Shoaib Iqbal

Reputation: 2730

cannot download image from URL react

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.

Upvotes: 2

Views: 4653

Answers (3)

Raj Navadiya
Raj Navadiya

Reputation: 21

A simple component 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"}
/>

Upvotes: 0

Ashish Bhardwaj
Ashish Bhardwaj

Reputation: 158

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 recommends 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 comes from the same domain.

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

Upvotes: 3

uday
uday

Reputation: 1481

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.

Upvotes: 2

Related Questions