2

I need a button that downloads images to the local. But those images coming from Unsplash API.

I found an HTML download attribute, LIVE DEMO

<p>Click on the image to download it:<p>
<a href="/images/myw3schoolsimage.jpg" download>
  <img src="/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>

enter image description here

But if I want to use this method in React It is not working. The reason is images that I want to download coming from Unsplash API thus It couldn't work! But If I try to download a local image that belongs to my project directory it was worked!

import style from "./style.module.css";
import cn from "classnames";
import { BiDownArrowAlt, BiPlus } from "react-icons/bi";

import logo from "../../assets/images/Logo.png";

const ImageCard = ({ image }) => {
    return (
        <div className={style.image}>
            {/* {  Download Button } */}
            <a href={logo} download target="_blank">
                <span className={cn(style.button, style.downloadButton)}>
                    <BiDownArrowAlt className={style.downloadIcon} />
                </span>
            </a>
        </div>
    );
};

This is worked but my photos coming from API.

I search this topic in StackOverflow and I found this question. But this method is not worked. That downloads an image but the images are not working.

enter image description here

import style from "./style.module.css";
import cn from "classnames";

import { BiDownArrowAlt, BiPlus } from "react-icons/bi";

const download = (e) => {
    console.log(e.target.href);
    fetch(e.target.href, {
        method: "GET",
        headers: {},
    })
        .then((response) => {
            response.arrayBuffer().then(function (buffer) {
                const url = window.URL.createObjectURL(new Blob([buffer]));
                const link = document.createElement("a");
                link.href = url;
                link.setAttribute("download", "image.png"); //or any other extension
                document.body.appendChild(link);
                link.click();
            });
        })
        .catch((err) => {
            console.log(err);
        });
};

const ImageCard = ({ image }) => {
    return (
        <div className={style.image}>
            {/* {  Download Button } */}
            <a
                href={image.links.download}
                download
                onClick={(e) => download(e)}
                target="_blank"
            >
                <span className={cn(style.button, style.downloadButton)}>
                    <BiDownArrowAlt className={style.downloadIcon} />
                </span>
            </a>
    );
};

export default ImageCard;

How I can solve that problem pls help me!

Luca Kiebel
  • 9,790
  • 7
  • 29
  • 44
Hasan Tezcan
  • 1,116
  • 1
  • 11
  • 23

2 Answers2

2

Here's a solution in vanilla javascript

const IMG_URL = "https://media.gettyimages.com/photos/closeup-network-space-picture-id1013942164?s=612x612";

function toDataURL(url) {
  return fetch(url).then((response) => {
          return response.blob();
      }).then(blob => {
          return window.URL.createObjectURL(blob);
      });
}

async function download() {    
    const a = document.createElement("a");
    a.href = await toDataURL(IMG_URL);
    a.download = "myImage.png";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

const link = document.querySelector('#link');

link.addEventListener('click', () => {
  download()
})
<a href="#" id="link">Download</a>

It's blocked here, but you can see it working on fiddle https://jsfiddle.net/f5061vbc/1/

StreetCoder
  • 36
  • 5
1

I think this image.links.download is probably missing the host domain part of the image URL.

Consider prepending the host domain to it so it kinda looks like this.

href={`IMAGE_HOST_DOMAIN/${image.links.download}`}

Since the image is coming from Unsplash API, it's most likely going to be Unsplash host domain

EDIT:

Refactor your download function to look like this:

const download = async (e) => {
  try {
    const blob = await fetch(e.target.href).then(res => res.blob())
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = "image.png"; //or any other extension
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } catch {
    console.error('Unable to download image...')
  }
};

And fire it onClick in the a tag like this

<a
 href={image.urls.raw}
 download
 onClick={download}
>
fortunee
  • 3,852
  • 2
  • 17
  • 29