How to download image in reactjs?

by

Came across this SO trying to figure out how to download a png image and found that the other answer didn’t quite do it for me as the downloaded file couldn’t be opened. Needed to use arraybuffer to convert the image.

Here’s the code that worked.

function App() {
  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);
      });
  };
  return (
    <div className="App">
      <a
        href="https://upload.wikimedia.org/wikipedia/en/6/6b/Hello_Web_Series_%28Wordmark%29_Logo.png"
        download
        onClick={e => download(e)}
      >
        <i className="fa fa-download" />
        download
      </a>
    </div>
  );
}

Codesandbox: https://codesandbox.io/s/dreamy-gould-h1l72

P.S.
The download approach was taken from, this reply, but used plain fetch instead of axios.
https://stackoverflow.com/a/50220546/10006323

More Related Contents:

  1. Import image dynamically in React component
  2. Image elements do not have explicit width and height
  3. React: Show loading spinner while images load
  4. How do I reference a local image in React?
  5. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  6. React Router v4 renders multiple routes
  7. How can I prevent event bubbling in nested React components on click?
  8. Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0
  9. In useEffect, what’s the difference between providing no dependency array and an empty one?
  10. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  11. Load local images in React.js
  12. How to call stopPropagation in reactjs?
  13. How to add custom MUI palette colors
  14. how to cancel/abort ajax request in axios
  15. Simple Conditional Routing in Reactjs
  16. How do I pass state through React_router?
  17. Reactjs Browser Tab Close Event
  18. Redux: Why is avoiding mutations such a fundamental part of using it?
  19. How to display an BLOB image stored in MySql database?
  20. Cannot use JSX unless the ‘–jsx’ flag is provided
  21. React Router not working with Github Pages
  22. How does connect work without mapDispatchToProps
  23. Default property value in React component using TypeScript
  24. react routing is able to handle different url path but tomcat returns 404 not available resources
  25. React: Why component’s constructor is called only once?
  26. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  27. Relative path in index.html after build
  28. Callback when DOM is loaded in react.js
  29. combine react build output into single js file
  30. Template literal – getting error from API

Leave a Comment