I am trying to make a SAVE file dialog show when i chick a link on my page. At the least i want to initiate a download of the file whos link was clicked. Here is what i have tried.

Just for kicks i put the "alert" statement to ensure the code was being rendred, and it is. Firebug does not catch any errors.

//download button navigate
var downloadButton = $('#downloadLinkLabel', window.parent.document);
var downloadButtonFunc = function(e) {
    e.preventDefault();  //stop the browser from following
    alert('its working');
    window.location.href = 'image.jpg';
};
addEventHandler(downloadButton[0], 'click', downloadButtonFunc);

Here is the HTML code

<div id="s-Label_61" class="label firer ie-background mentable">
    <div class="valign"><span>Download</span></div>
</div>

I am using a prototyping tool to create a UI and have a underlying browser page which is running all my custom scripts. The prototyping tool only allows for simple urls and does not allow for setting headers/attributes. If there is a way to inject this code via jquery then that would work

I am trying to make a SAVE file dialog show when i chick a link on my page. At the least i want to initiate a download of the file whos link was clicked. Here is what i have tried.

Just for kicks i put the "alert" statement to ensure the code was being rendred, and it is. Firebug does not catch any errors.

//download button navigate
var downloadButton = $('#downloadLinkLabel', window.parent.document);
var downloadButtonFunc = function(e) {
    e.preventDefault();  //stop the browser from following
    alert('its working');
    window.location.href = 'image.jpg';
};
addEventHandler(downloadButton[0], 'click', downloadButtonFunc);

Here is the HTML code

<div id="s-Label_61" class="label firer ie-background mentable">
    <div class="valign"><span>Download</span></div>
</div>

I am using a prototyping tool to create a UI and have a underlying browser page which is running all my custom scripts. The prototyping tool only allows for simple urls and does not allow for setting headers/attributes. If there is a way to inject this code via jquery then that would work

• javascript
• jquery
• html

• 1 You should use a static link to a page that sends the proper attachment headers instead, then the image will be downloaded automatically when clicking the link without any javascript. – adeneo Commented Dec 6, 2013 at 19:13
• You can make a "save" dialog of sorts, but you can't override the browser dialog if that's what you were planning. – Zarathuztra Commented Dec 6, 2013 at 19:17
• yes that would be the most sensible thing to do but i cannot do so in my scenario. I am using a prototyping tool to create a UI and have a underlying browser page which is running all my custom scripts. The prototyping tool only allows for simple urls and does not allow for setting headers. – codeNinja Commented Dec 6, 2013 at 19:18
• @zarazthuztra i do not want to override the browser dialog. On the contrary i actually want the browser dialog to show up. – codeNinja Commented Dec 6, 2013 at 19:19
• @codeNinja Cool. I've seen people wanting to do that before >.> In any case, why not make some sort of AJAX request to a server side script that sets the headers and sends the image as the response? – Zarathuztra Commented Dec 6, 2013 at 19:20

2 Answers 2

You can use the HTML5 download attribute for supporting browsers, for non-supporting browsers I believe the only solution would be setting the appropriate headers.

<a href="http://img./img.png" download="myImage.png">DOWNLOAD THIS IMAGE</a>

FIDDLE

EDIT:

You can (almost) just as easily create the link and click it with javascript

$('#s-Label_61 span').on('click', function() {
     var a = document.createElement('a');
     a.download = 'myImage.png';
     a.href = '/link/to/image.png';
     a.click();
});

FIDDLE

If you dont want to use html 5, you can have the image on Base64 and href the url:

"image/octet-stream,Base64"