0

I have a simple app that fetches images from Unsplash API. I would like users to click on the image, and download it and also maybe for the image to open in a new tab too. The urls.regular is just a simple url like https://images.unsplash.com/photo-1543332164-6e82f355badc?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE3OTUzOH0

After reading other issues on stackoverflow, I added "download" at the end of my a tag.

<div>
  <a href={urls.regular} title={description} download>
     <img
      src={urls.regular}
     />                   
  </a>
</div>

I have also tried the following in my a tag:

                    href={urls.regular}
                    target="_blank"
                    rel="noopener noreferrer"
                    download={urls.regular}
Hesam Alavi
  • 149
  • 3
  • 12
  • you can check this post for answers to a similar question https://stackoverflow.com/questions/57056741/how-to-download-image-in-reactjs – Ozgur Sar Nov 12 '20 at 13:09
  • 1
    Does this answer your question? [How to download image in reactjs?](https://stackoverflow.com/questions/57056741/how-to-download-image-in-reactjs) – Ozgur Sar Nov 12 '20 at 13:10

1 Answers1

0

You should define onclick event for the a tag.

<a href={urls.regular} title={description} download onclick="onClick(urls.regular)">

function onClick(url) {
    window.open(url, '_blank');
}
wangdev87
  • 8,611
  • 3
  • 8
  • 31
  • The code you wrote just opens the image in a new tab after clicking, it does not download the image. I want to first fetch the images and present them in list, which the app does at this moment, then click on any of the images and 1- the image gets downloaded 2- the image opens in a new tab. But most importantly the image to download. – Hesam Alavi Nov 11 '20 at 02:06
  • https://codesandbox.io/s/tender-snow-hhw4p?file=/src/components/App.js – Hesam Alavi Nov 11 '20 at 03:01
  • So this is the process I like to have. User searches for an image. A list of images show up. Then the user clicks on a desired image, that image is automatically downloaded on their device, and opened in a new tab. – Hesam Alavi Nov 11 '20 at 03:04
  • when you just remove `onclick=...`, download works properly? – wangdev87 Nov 11 '20 at 03:15
  • I removed it but when I click on the image, the image does not download on my laptop, it just opens to full size. – Hesam Alavi Nov 11 '20 at 03:23
  • I tested in both vs code and sandbox, the updated sandbox now does not have onClick. Unless I am missing something. – Hesam Alavi Nov 11 '20 at 03:25
  • `download` attribute will work for same origin, so check in your local. – wangdev87 Nov 11 '20 at 03:27
  • How do I check for that, and how do I get the image to download on my laptop, e.g. save on my desktop – Hesam Alavi Nov 11 '20 at 03:29
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/224495/discussion-between-hesam-alavi-and-william-wang). – Hesam Alavi Nov 12 '20 at 21:04