How to fetch Azure Blob Storage with JavaScript

Tldr; This post introduces Azure Blob Storage and the Javascript fetch api and provides a code sample below for integrating public blobs quickly into your own applications.

The Azure Blob Service, provides scalable, cost-effective cloud storage for all your applications unstructured data.

Click here to learn more about blob storage.

With blob storage, developers pay only for what they use, and save money compared with on-premises storage options.

In web applications we can use blobs for anything from storing images and video content to actually hosting our client side application logic and style sheets for dynamic loading. In this way you only pay for hosting of the parts of the your site that users are actually using and you don’t need.

Introduction to Blob storage - Object storage in Azure

Azure Blob storage stores massive amounts of unstructured object data, such as text or binary data. Choose from among four storage tiers, depending on how often you’ll access the data. Store performance-sensitive data in Premium, frequently accessed data in Hot, infrequently accessed data in Cool, and rarely accessed data in Archive. If you want to get started with Azure click here for a free account.

Blob Service REST API

The Blob service REST API stores text and binary data as blobs in the cloud.

Fetch API

The Fetch API provides an interface for fetching resources (including across the network). While fetch natively supports JSON responses, it can be extended with the window.DOMParser to support XML data such the data returned from the Blob Storage REST API as in the sample below.

fetch("https://{namespace}.blob.core.windows.net/{containerName}/?restype=container&comp=list")
.then(response => response.text())
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
.then(xml => {
  let blobList = Array.from(xml.querySelectorAll("Url")); //.getAttribute("Url");
  blobList.forEach(async blobUrl => {
      console.log(blobUrl);
  });

There you have it you have the code you need to get started with client side consumption of Azure Blob Storage hope this helps you with your azure journey.

About the Author

Aaron (Ari) Bornstein is an avid AI enthusiast with a passion for history, engaging with new technologies and computational medicine. As an Open Source Engineer at Microsoft’s Cloud Developer Advocacy team, he collaborates with Israeli Hi-Tech Community, to solve real world problems with game changing technologies that are then documented, open sourced, and shared with the rest of the world.