How to download an image from frontend?

Question

I am using this function to download the image I am getting from server on frontend of my app.

    const downloadImage = () => {
        fetch(`url`, {
            method: 'GET',
            headers: {
                'Content-Type': 'image/png',
                'Content-Disposition': 'attachment',
            },
        })
        .then((response) => response.blob())
        .then((blob) => {
            // Create blob link to download
            const url = window.URL.createObjectURL(
                new Blob([blob]),
            );
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute(
                'download',
                `FileName.png`,
            );
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        });
    }

its successfully downloading the image but when opening its showing image type not supported

Does this answer your question? [How to download image in reactjs?](https://stackoverflow.com/questions/57056741/how-to-download-image-in-reactjs) — Mehul Thakkar, Jan 26 '22 at 06:42
I am having a cors error during fetching the image with this function — Abdus Sattar Nishad, Jan 26 '22 at 07:31
Have you checked the answer below? I have added a working example at codesandbox. — Mehul Thakkar, Jan 26 '22 at 10:24
yes i did. its working with the image link u gave. But when i want to fetch a image from my server its giving a cors error. Do u have any idea how to avoid cors error? — Abdus Sattar Nishad, Jan 26 '22 at 11:40
Can you share the URL you're hitting if it's not private? This is something that should be handled by your own backend or possibly using some Authentication. Need to debug that. — Mehul Thakkar, Jan 27 '22 at 05:40

score 3 · Answer 1 · answered Jan 26 '22 at 06:52

I think this one will be able to solve your issue. I have used react. This answer is derived from an answer here.

A Working example at codesanbox here.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const download = (e) => {
    fetch(
      "https://upload.wikimedia.org/wikipedia/en/6/6b/Hello_Web_Series_%28Wordmark%29_Logo.png",
      {
        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.download = "image.png";
          link.click();
        });
      })
      .catch((err) => {
        console.log(err);
      });
  };
  return (
    <div className="App">
      <h1>Hello, you seem to want to know how to download images</h1>
      <a href="javascript:void(0)" onClick={(e) => download(e)}>
        <i className="fa fa-download" />
        download
      </a>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

How to download an image from frontend?

1 Answers1