4

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
VnoitKumar
  • 1,350
  • 15
  • 29
  • 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

2 Answers2

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>
Frostbourn
  • 330
  • 3
  • 21
-1

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);
}
jack
  • 351
  • 5
  • 23