CODEWITHSUNDEEP
htmlreactjs
acheese
acheese

Reputation: 59

Download Image from Frontend a tag not working

I am trying to create a download button using the a tag. I have the "download" property added, but it won't download, it just opens in a new tab. This is the code:

<div className="item">
  <img src={imageUrl} alt="" className="sketch-1"/>
  <a href={imageUrl} download>Download</a>
</div>

Basically, the user uploads an image, it's sent to a backend server where modifications are made, then it is stored in a Cloudinary bucket and the modified image is re-rendered on the frontend. I want the user to be able to download the new image, but this isn't working. I think it has something to do with the href being a variable. Any help would be appreciated.

Upvotes: 1

Views: 141

Answers (1)

Daan
Daan

Reputation: 116

That is because you have a url in the 'href' the download button will open the url in a new tab.

The only way you can force an image download is when the image is on your domain.

Maybe you can download the image with some javascript to your server and then serve the path to your a tag. But I wouldn't know how to do that.

Sorry to dissapoint you

Upvotes: 1

Related Questions