Force to download image instead of opening url link to image

Question

<a download='file' href="https://tinyjpg.com/images/social/website.jpg">
  Download
</a>

Is there a way to force the download of a file instead of opening the file in a new window? Right now if the file is a URL, like the example below it won't be downloaded and will open in a new window.

No as you can see if you run it, it opens a new page with the image instead of downloading it — gnifrus, Apr 09 '18 at 15:13
Your code there should work. However, you've renamed your download to 'file', if it's a jpg or an image you may want to add that file extension onto it. — Dylan Wright, Apr 09 '18 at 15:13
I tried and it works just fine (with another file)... Can you use a snippet? — D. Pardal, Apr 09 '18 at 15:19
I second @D.Pardal I think it's your link/file. It works with my file as well. — Dylan Wright, Apr 09 '18 at 15:21
I think it is with the link that you are using in specific, the browser detects it as an image and opens it, try using a file that is on your server. — Ivan-San, Apr 09 '18 at 15:31
Does this answer your question? [How can I create download link in HTML?](https://stackoverflow.com/questions/2793751/how-can-i-create-download-link-in-html) — Yevhenii Bahmutskyi, Jun 29 '21 at 11:57

Peter B · Answer 1 · 2023-07-15T20:15:37.000

You may be bitten by the fact that Firefox and Chrome 65+ only support same-origin download links, probably as a security measure.

Source: https://caniuse.com/#feat=download (see "Known issues" tab)

The Web Hypertext Application Technology Working Group (WHATWG) recommends that in cross-origin scenarios (as in your example), the web server that is hosting the image/file in question needs to send a Content-Disposition HTTP header for download= to be honored.

Source: https://html.spec.whatwg.org/multipage/links.html#downloading-resources

In short:

You can only use <a download='...'></a> to force download of an image/file, if:

the html and the image/file are both being hosted on the same domain,
or
the html and the image/file are on different domains, and the external image/file server also says it should be downloaded by means of a Content-Disposition HTTP header.

Thanks for the answer @peter! Our backend is hosting the files on S3, is there a setting there for `Content-Disposition` to allow download, or can it be defined in our API? — gnifrus, Apr 09 '18 at 16:50

score 2 · Answer 2 · answered Jan 15 '20 at 15:32

Maybe you have solved in the meanwhile, but since you are hosting the files on S3 (see comments on Peter B's answer), you need to add a signature to the files url and set the ResponseContentType to binary/octet-stream by using the aws sdk. I am using Node so it becomes:

const promises = array.map((item) => {
        const promise = s3.getSignedUrlPromise('getObject', {
            Bucket: process.env.S3_BUCKET,
            Key: key, //filename
            Expires: 604800, //time to expire in seconds (optional)
            ResponseContentType: 'binary/octet-stream' 
        });

        return promise;
    });

    const links = await Promise.all(promises);

I hope this helps.

score 0 · Answer 3 · answered Feb 14 '20 at 22:10

setTimeout(function() {
  
   url = 'https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png';
   // downloadFile(url); // UNCOMMENT THIS LINE TO MAKE IT WORK
  
}, 2000);

// Source: http://pixelscommander.com/en/javascript/javascript-file-download-ignore-content-type/
window.downloadFile = function (sUrl) {

    //iOS devices do not support downloading. We have to inform user about this.
    if (/(iP)/g.test(navigator.userAgent)) {
       //alert('Your device does not support files downloading. Please try again in desktop browser.');
       window.open(sUrl, '_blank');
       return false;
    }

    //If in Chrome or Safari - download via virtual link click
    if (window.downloadFile.isChrome || window.downloadFile.isSafari) {
        //Creating new link node.
        var link = document.createElement('a');
        link.href = sUrl;
        link.setAttribute('target','_blank');

        if (link.download !== undefined) {
            //Set HTML5 download attribute. This will prevent file from opening if supported.
            var fileName = sUrl.substring(sUrl.lastIndexOf('/') + 1, sUrl.length);
            link.download = fileName;
        }

        //Dispatching click event.
        if (document.createEvent) {
            var e = document.createEvent('MouseEvents');
            e.initEvent('click', true, true);
            link.dispatchEvent(e);
            return true;
        }
    }

    // Force file download (whether supported by server).
    if (sUrl.indexOf('?') === -1) {
        sUrl += '?download';
    }

    window.open(sUrl, '_blank');
    return true;
}

window.downloadFile.isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
window.downloadFile.isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;

Please explain why this code is a good solution for the OP, code only answers are frowned upon by SO — Marcello B., Feb 14 '20 at 23:19

score 0 · Answer 4 · answered Jun 24 '21 at 08:50

You can use this function to downlaod images using fetch

async function downloadImage(imageSrc) {
  const image = await fetch(imageSrc)
  const imageBlog = await image.blob()
  const imageURL = URL.createObjectURL(imageBlog)

  const link = document.createElement('a')
  link.href = imageURL
  link.download = 'image file name here'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

score -8 · Answer 5 · answered Oct 15 '20 at 11:32

-8

Your link should have an ID to force download:

<a download='website.jpg' id='blablabla' href="https://tinyjpg.com/images/social/website.jpg">
  Download
</a>

answered Oct 15 '20 at 11:32

Trần Ngọc

1
1

Force to download image instead of opening url link to image

5 Answers5

Linked

Related