Azure blob storage file downloading [JS,link]

Question

Hi everyone, I faced up with a problem. I store file in azure blob storage with name different from original to prevent duplicates and etc. But here is a problem, when I generate sasToken and build link to download file, it downloads with azure file name, in frontend to download I simply use JS like this:
const link = document.createElement('a'); link.href = data; link.download = file.name; document.body.appendChild(link); link.click(); link.parentNode?.removeChild(link);
but download property not working, then I tried to add something to the link in the end(but it also seems not working), is there is a way how I can set the name of file to download with JS or by adding something to the link?
Would be very thankful to any ideas.

Answer 1

Hello Vadym S,

Thank you for posting your query here!

One way is to use Content-Disposition property of the blob to achieve this. What you can do is set the name of the blob as GUID, however, set the content-disposition property of the blob as attachment; filename="original-file-name". If you want the file to be always downloaded, you can permanently set this property. However, if you want to only set this name when the file is downloaded, you can create a Shared Access Signature on the blob with Read permission and overwrite this header.

Here are a few blogs for reference:

https://mindbyte.nl/2023/08/12/direct-download-from-azure-blob-storage-using-contentdisposition-header-to-set-the-filename.html

https://copyprogramming.com/howto/friendly-filename-when-public-download-azure-blob

Similar discussions:

https://stackoverflow.com/questions/47085165/how-to-download-file-with-filename

https://stackoverflow.com/questions/47181215/how-to-download-the-azure-blob-content-with-the-same-name-of-file

Also, once you have the blob data downloaded, you can invoke the browser download process from the local data. One option to do this is to use a library like Filesaver.js, which allows setting the download file name as a parameter:

var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

Do let us know if you have any further queries. I’m happy to assist you further.

Please do not forget to "Accept the answer” and “up-vote” wherever the information provided helps you, this can be beneficial to other community members.