Javascript download a URL - Azure Blob Storage

Question

I am using Azure Blob Storage, and I want users to be able to download files. When a user clicks a file they want to download, I use AJAX to generate a shared access signature and return the URL to download from. Is there any way for me to then, using Javascript, download the file? Or is there some other method I can use... I also would like it to not run server side, as there is no reason to incur unnecessary cost when I should be able to download directly from the URL...

Basically, how Dropbox does it... Is it submitting some form somehow? It doesn't even have to be like that.

Answer 1

If I understand correctly, you want your users to see Open/Save As prompt when they click on the SAS URL.

Assuming my understanding is correct, recently Windows Azure Storage had announced some enhancements. One of the enhancement there is addition of Content-Disposition property for the blob which would allow this Open/Save As prompt to show when a user clicks on the SAS link for the blob. With Content-Disposition, you have 2 options:

1. Set Content-Disposition as blob property: In this case, whenever user clicks on the SAS link, they will be prompted to save the file. But in this case, they will always be prompted so SAS link or not, user would never be able to see the document inline in the browser. You may find this link useful for this: http://msdn.microsoft.com/en-us/library/windowsazure/ee691966.aspx.
2. Set Content-Disposition as part of SAS URL: In this case, a user will only be prompted when they click on the SAS URL which contains Content-Disposition. You may find this link useful for this: http://msdn.microsoft.com/en-us/library/windowsazure/dn140255.aspx.

So assuming you have a png file. In option 1, it will never be displayed inline in the browser, it will be downloaded on the client machine and opened in the registered image viewer on your computer. In option 2, if Content-Disposition is set in the SAS URL, the image file will be downloaded on the client machine and opened in the registered image viewer on your computer otherwise it will be displayed directly in the browser.

If you're using .Net, Storage Client library 3.0.0.0 has support for this feature so you don't have to write wrapper around the REST API (but I think you're using PHP ... from your previous question about CORS :)).

Answer 2

To avoid reload/redirection, I use this library :

http://jqueryfiledownload.apphb.com/

If you need help to set it up : http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/

But if you want to redirect the user, you could use basic thing like :

window.location.href = "http://stackoverflow.com/file.pdf";

Answer 3

The way that I've done this in the past is by opening a hidden iframe with the url for the download.

Something along the lines of

var frame = document.createElement('iframe');
frame.src = url; // your Azure url
frame.style.display = 'none';
document.body.appendChild(frame);

Note that you'll need to make sure that you don't try to do this on a secure (https) page with an insecure download (http)