download image in react

Question

I've used unsplash API to display photos. when I click on a photo, it shows the photo in a modal and under there is a download button. When I click on that button, it doesn't download the image but instead shows the photo in that tab in the biggest resolution it is available. How do I make that download button actually download the photo?

<a href={photo.links.download} download>Download</a> //this doesn't work to download the photo

what's the link the href? the code is fine, the link might be the problem — Nicolae Maties, Jul 29 '20 at 10:35
the link is https://unsplash.com/photos/gr8rauk90Kk/download — , Jul 29 '20 at 10:37
A duplicate question, Referer to this answer [href image link download on click](https://stackoverflow.com/q/2408146/5456476) — Ali Torki, Jul 29 '20 at 10:39
@AliTorki no it isn't. I tried the answers posted there and it didn't work — , Jul 29 '20 at 10:40

score 1 · Answer 1 · answered Dec 16 '20 at 09:39

1

This simple soultion will work. Add ?force=true at the end of each url href attribute:

<a href={photo.links.download + "?force=true"}>Download</a>

answered Dec 16 '20 at 09:39

Frostbourn

304
3
20

score 0 · Answer 2 · answered Jul 29 '20 at 10:41

I think that works

const download = e => {
var element = e.target;
var file = new Blob(
  [
    "https://timesofindia.indiatimes.com/thumb/msid-70238371,imgsize-89579,width-400,resizemode-4/70238371.jpg"
  ],
  { type: "image/*" }
);
element.href = URL.createObjectURL(file);
element.download = "image.jpg";
element.click();


};
  return (
    <div className="App">
      <a
        href="https://timesofindia.indiatimes.com/thumb/msid-`70238371,imgsize-89579,width-400,resizemode-4/70238371.jpg"`
        download
        onClick={(e) => download(e)}
      >
        <i className="fa fa-download" />
        download
      </a>
    </div>
  );

https://codesandbox.io/s/elegant-allen-nbe7d?file=/src/App.js:85-749 I tried it is working. — Erhan Namal, Jul 29 '20 at 10:47

score 0 · Answer 3 · answered Jul 29 '20 at 10:50

try this:

downloadFile = (file) => {

  const blob = new Blob(
    [ file ],
    { type: 'image/jpeg' }
  );
  const href = await URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = href;
  link.download = 'your file name' + '.jpeg';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

download image in react

3 Answers3