cannot download image from URL react

Question

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.

@HardikChaudhary now it's opening the image in same tab instead of new tab — Shoaib Iqbal, Jan 07 '20 at 08:49
working example: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_download — Hardik Chaudhary, Jan 07 '20 at 08:52
@HardikChaudhary that example wont work for different origin urls [reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes) — uday, Jan 07 '20 at 09:14

score 3 · Answer 1 · answered Jan 07 '20 at 10:23

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

answered Jan 07 '20 at 10:23

Ashish Bhardwaj

158
5

You can take help from the below article: https://www.roytuts.com/download-file-from-server-using-react/ But again if the request is made to other domains then the CORS problem will come and this needs to be handled separately from the server-side to support CORS. – Ashish Bhardwaj Jan 07 '20 at 10:26
i have used this answer https://stackoverflow.com/a/50405118/8196136. i have django backend which gives signedurls for s3 objects and i am using that url to download it – Shoaib Iqbal Jan 07 '20 at 11:35

uday · Answer 2 · 2020-01-07T09:54:44.003

2

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.

edited Jan 07 '20 at 09:54

answered Jan 07 '20 at 09:49

uday

1,421
10
19

score 0 · Answer 3 · answered Oct 22 '20 at 07:31

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"}
/>

cannot download image from URL react

3 Answers3