image does not download with it's own extension

Question

I have used below code to download image with given name. But this seems does not download image with it's own image extension.

Here is HTML

<a id="btnDownload" href="www.mywebsite.com/images/myimage.jpg" onClick="downloadImage(www.mywebsite.com/images/myimage.jpg);" >download</a>

and code

function downloadImage(sUrl){    
    window.URL = window.URL || window.webkitURL;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', sUrl, true);
    xhr.responseType = 'blob';
    xhr.onload = function(e) {
        var res = xhr.response;
        var blob = new Blob([res], {type:'image'});
        url = window.URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = url;
        a.download = "My image name";
        document.body.appendChild(a);
        a.click();
    };
    xhr.send();
}

What i want is i want downloaded image with "My image name"."extension". Here image does have alternative extension like jpeg, png, gif. But this code always download file without extension. Any changes here?

I'm not sure, but perhaps the {type:'image'} part should refer to a complete mime type identifier, like image/jpeg for exampla. — Zoltán Tamási
First of all the parameter should be a string or more simple this.href. — Lain
Maybe you can try this <a id="btnDownload" href="www.mywebsite.com/images/myimage.jpg" download> — Thum Choon Tat
@Thum Choon Tat: Has no IE support.. neither has the OP solution tho. — Lain

Lain Lain · Accepted Answer · 2016-11-25T08:55:05

To get the extension in your example you could do:

a.download = "My image Name." + window.URL.split('.').pop();

Yet I would work with different data-attributes:

<html>
    <!--
        You can put the href and the name you want to see in different data attributes.
        Also one can add IE support.
    -->

    <head>
        <script>
            //e:=<a [data-name] [data-href]>
            function downloadMe(e){
                var tF = e.getAttribute('data-name');
                var tURL = e.getAttribute('data-href')

                var tR = new XMLHttpRequest();
                tR.open('GET', tURL, true);
                tR.responseType = 'blob';

                tR.onload = function(e){
                    var tB = this.response;

                    if(window.top.navigator.msSaveOrOpenBlob){
                        //Store Blob in IE
                        window.top.navigator.msSaveOrOpenBlob(tB, tF)
                    }
                    else{
                        //Store Blob in others
                        var tA = document.body.appendChild(document.createElement('a'));
                        tA.href = URL.createObjectURL(tB);
                        tA.download = tF;
                        tA.style.display = 'none';
                        tA.click();
                        tA.parentNode.removeChild(tA)
                    }
                };

                tR.send();

                return false
            }
        </script>
    </head>

    <body>
        <a href = '#' data-href = 'A.png' data-name = 'My Name.png' onclick = 'return downloadMe(this)'>download</a>
    </body>
</html>

image does not download with it's own extension

1 Answers