How can I download an image using React?

Question

I'm trying to download files by URL, but the page is redirecting instead of downloading.

I don't want to use any extensions or libraries.

    const File = ({href}) => {
            const onDownload = () => {
                    const link = document.createElement('a');
                    link.href = href;
                    link.download = 'name';
                    link.click();
                }
            return (
                <button onClick={onDownload}>
                    download
                </button>
            );
        };
    
    const Downloader = () => {
        const files = [
            'https://thumbs.dreamstime.com/b/example-red-tag-example-red-square-price-tag-117502755.jpg',
            'https://image.shutterstock.com/image-photo/example-word-written-on-wooden-260nw-1765482248.jpg',
        ]
    
    
        return (<div>{files.map(f => <File href={f} key={f}/>)} </div>);
    };
    
    export default Downloader;

I'm not sure I understand; you're explicitly clicking the link, same as if the user did it. Are you saying you want to initiate a download on the user's browser when the button is clicked? — Dave Newton, Sep 01 '22 at 14:44
This is a similar question: https://stackoverflow.com/questions/42158040/how-can-i-prevent-href-redirect-onclick To prevent redirects, you can use Event.preventDefault() https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault — pythko, Sep 01 '22 at 14:47
clicking the link won’t trigger a download if the resource to be downloaded wasn’t served from the same origin or same server, check my below answer — Abasaheb Gaware, Sep 02 '22 at 04:35

score 1 · Accepted Answer · answered Sep 01 '22 at 15:07

As of late 2018, clicking the link won’t trigger a download if the resource to be downloaded wasn’t served from the same origin or same server. Apparently, this is restriction is a security measure.

You can download the content in browser and make it downloadable, you can check the below url:

https://medium.com/charisol-community/downloading-resources-in-html5-a-download-may-not-work-as-expected-bf63546e2baa

answer from this: Download Link not working in html

check this answer - @GaroGabrielyan – Abasaheb Gaware Sep 01 '22 at 15:09 — Abasaheb Gaware, Sep 01 '22 at 15:09

Abasaheb Gaware · Answer 2 · 2022-09-01T14:53:03.443

0

you can simply add this in place of a button:

const File = ({href}) => {
    return (
            <a href={href} download><button>Download</button></a>
    );
};

This will force the browser to download the link file

edited Sep 01 '22 at 14:53

answered Sep 01 '22 at 14:50

Abasaheb Gaware

509
4
13

i had hard coded the same , but result is the same – Garo Gabrielyan Sep 01 '22 at 14:52
now try the above updated code - @GaroGabrielyan – Abasaheb Gaware Sep 01 '22 at 14:53
did not help, same result, you can try – Garo Gabrielyan Sep 01 '22 at 14:57
please check the latest answer - @GaroGabrielyan – Abasaheb Gaware Sep 01 '22 at 15:08

How can I download an image using React?

2 Answers2