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, Nov 25 '16 at 08:38
First of all the parameter should be a string or more simple this.href. — Lain, Nov 25 '16 at 08:39
@Thum Choon Tat: Has no IE support.. neither has the OP solution tho. — Lain, Nov 25 '16 at 08:45
Simply adding download it download image but not with custom name. — Hitesh S, Nov 25 '16 at 08:47

Lain · Accepted Answer · 2016-11-25T09:24:18.177

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 Answers1

Linked