Need help downloading image from Azure Blobs using NodeJS

Question

I got most of the code from the NodeJS Blob quickstart from azure, I am able to upload files including images successfully and I can see them in the azure storage dashboard just fine. But I can't seem to download them or get a URL to them and I need the url for my database so I can query it and use the url to retrieve the file.

The download part of the code in the quickstart isnt so clear to me, it seems to be made for text as the upload is as well. If I go into my azure storage dashboard I can see the container and I can see the blob created with the image and I can click on the image and it loads in another page. However if I go to properties and select the Uri: https://facerstorage.blob.core.windows.net/a00008/sun.png and paste it into my browser I get :

And I also print out the url returned from the blockBlobURL and it is the same as the one in the Uri in the blobs dashboard above, althought it has a '/./' between a0009 and sun.png which gets removed by the browser for example: https://facerstorage.blob.core.windows.net/a00009/./sun.png" its the same and I get the same error.

Not sure what is wrong here

I used the code from the nodejs blobs quickstart the code for the download is as follows:

const blockBlobURL = BlockBlobURL.fromContainerURL(containerURL, content);
console.log("The blobs URL is: " + JSON.stringify(blockBlobURL.url));
const downloadResponse = await blockBlobURL.download(aborter, 0);
downloadedContent = downloadResponse.readableStreamBody.read(content.length)//.toString();
console.log(`Downloaded blob content: "${downloadedContent}"`);

I dont have the code for the BlockBlobURL.download function, nor do I understand what:

  const downloadResponse = await blockBlobURL.download(aborter, 0);
    downloadedContent = downloadResponse.readableStreamBody.read(content.length)//.toString();

is doing.

I think that from the url above those I should already be able to access the image from that url but I get the errors as shown above. Don't know exactly what else these 2 do.

Thanks for any help.

this, probably, means your storage is not public. you need to set it to public or authenticate properly when attempting to download it — 4c74356b41
Where can I set this and read about this any links please, I didnt see anything about this in the quickstart guide?? And also when it ran download Response and download content it worked without needing anything. — Jack
this talks about creating a container and setting access level: docs.microsoft.com/en-us/azure/storage/blobs/… also check this: docs.microsoft.com/en-us/azure/storage/blobs/… — 4c74356b41

Peter Pan Peter Pan · Accepted Answer · 2019-01-30T08:22:31

It sounds like you want to download or show the images stored in Azure Blob Storage, but the container of these images is not public. It's very similar with the SO thread Azure file image path using java.

The solution is to generate a blob url with SAS signature for downloading or directly showing in the browser, you can refer to the offical document Using shared access signatures (SAS) and Manage anonymous read access to containers and blobs to know the concept.

Here is the sample code in Node for generating a blob url with SAS signature, which comes from here.

To create a Shared Access Signature (SAS), use the generateSharedAccessSignature method. Additionally you can use the date helper functions to easily create a SAS that expires at some point relative to the current time.

var azure = require('azure-storage');
var blobService = azure.createBlobService();

var startDate = new Date();
var expiryDate = new Date(startDate);
expiryDate.setMinutes(startDate.getMinutes() + 100);
startDate.setMinutes(startDate.getMinutes() - 100);

var sharedAccessPolicy = {
  AccessPolicy: {
    Permissions: azure.BlobUtilities.SharedAccessPermissions.READ,
    Start: startDate,
    Expiry: expiryDate
  }
};

var token = blobService.generateSharedAccessSignature(containerName, blobName, sharedAccessPolicy);
var sasUrl = blobService.getUrl(containerName, blobName, token);

Note: The code above is based on npm package azure-storage v2 via npm install azure-storage, not the preview version v10-Preview via npm i @azure/storage-blob or follow the offical document Quickstart: Upload, download, list, and delete blobs using Azure Storage v10 SDK for JavaScript (preview) to install. For using v10 APIs to generating the SAS url, you can refer to my code for SO tread Azure file image path using java in Java which APIs are similar with these for Node.

Or just to concat a normal blob url with token to get a url with SAS like below, so you can just generate a token to apply at the end of any blob url.

var sasUrl = blobUrl + token;

Then, you can use the url with SAS to show in browser via <img src="<sas url>"> or directly download it using Http client without any additional authentication until the expiry time.

Need help downloading image from Azure Blobs using NodeJS

1 Answers