Quickstart: Azure Blob storage client library v12 for JavaScript

• 11/05/2019
• 8 minutes to read
• • 
  • 
  • 
  • 
  • 
  • +4

Get started with the Azure Blob storage client library v12 for JavaScript. Azure Blob storage is Microsoft's object storage solution for the cloud. Follow steps to install the package and try out example code for basic tasks. Blob storage is optimized for storing massive amounts of unstructured data.

Use the Azure Blob storage client library v12 for JavaScript to:

• Create a container
• Upload a blob to Azure Storage
• List all of the blobs in a container
• Download the blob to your local computer
• Delete a container

API reference documentation | Library source code | Package (Node Package Manager) | Samples

Prerequisites

• Azure subscription - create one for free
• Azure storage account - create a storage account
• Current Node.js for your operating system.

Setting up

This section walks you through preparing a project to work with the Azure Blob storage client library v12 for JavaScript.

Create the project

Create a JavaScript application named blob-quickstart-v12.

1. In a console window (such as cmd, PowerShell, or Bash), create a new directory for the project.

   mkdir blob-quickstart-v12
   

2. Switch to the newly created blob-quickstart-v12 directory.

   cd blob-quickstart-v12
   

3. Create a new text file called package.json. This file defines the Node.js project. Save this file in the blob-quickstart-v12 directory. Here is the contents of the file:

   {
       "name": "blob-quickstart-v12",
       "version": "1.0.0",
       "description": "Use the @azure/storage-blob SDK version 12 to interact with Azure Blob storage",
       "main": "blob-quickstart-v12.js",
       "scripts": {
           "start": "node blob-quickstart-v12.js"
       },
       "author": "Your Name",
       "license": "MIT",
       "dependencies": {
           "@azure/storage-blob": "^12.0.0",
           "@types/dotenv": "^4.0.3",
           "dotenv": "^6.0.0"
       }
   }
   

   You can put your own name in for the author field, if you'd like.

Install the package

While still in the blob-quickstart-v12 directory, install the Azure Blob storage client library for JavaScript package by using the npm install command. This command reads the package.json file and installs the Azure Blob storage client library v12 for JavaScript package and all the libraries on which it depends.

npm install

Set up the app framework

From the project directory:

1. Open another new text file in your code editor

2. Add require calls to load Azure and Node.js modules

3. Create the structure for the program, including very basic exception handling

   Here's the code:

   const { BlobServiceClient } = require('@azure/storage-blob');
   const uuidv1 = require('uuid/v1');
   
   async function main() {
       console.log('Azure Blob storage v12 - Javascript quickstart sample');
       // Quick start code goes here
   }
   
   main().then(() => console.log('Done')).catch((ex) => console.log(ex.message));
   

4. Save the new file as blob-quickstart-v12.js in the blob-quickstart-v12 directory.

Copy your credentials from the Azure portal

When the sample application makes a request to Azure Storage, it must be authorized. To authorize a request, add your storage account credentials to the application as a connection string. View your storage account credentials by following these steps:

1. Sign in to the Azure portal.

2. Locate your storage account.

3. In the Settings section of the storage account overview, select Access keys. Here, you can view your account access keys and the complete connection string for each key.

4. Find the Connection string value under key1, and select the Copy button to copy the connection string. You will add the connection string value to an environment variable in the next step.

   

Configure your storage connection string

After you have copied your connection string, write it to a new environment variable on the local machine running the application. To set the environment variable, open a console window, and follow the instructions for your operating system. Replace <yourconnectionstring> with your actual connection string.

Windows

setx CONNECT_STR "<yourconnectionstring>"

After you add the environment variable in Windows, you must start a new instance of the command window.

Linux

export CONNECT_STR="<yourconnectionstring>"

macOS

export CONNECT_STR="<yourconnectionstring>"

Restart programs

After you add the environment variable, restart any running programs that will need to read the environment variable. For example, restart your development environment or editor before continuing.

Object model

Azure Blob storage is optimized for storing massive amounts of unstructured data. Unstructured data is data that does not adhere to a particular data model or definition, such as text or binary data. Blob storage offers three types of resources:

• The storage account
• A container in the storage account
• A blob in the container

The following diagram shows the relationship between these resources.

Use the following JavaScript classes to interact with these resources:

• BlobServiceClient: The BlobServiceClient class allows you to manipulate Azure Storage resources and blob containers.
• ContainerClient: The ContainerClient class allows you to manipulate Azure Storage containers and their blobs.
• BlobClient: The BlobClient class allows you to manipulate Azure Storage blobs.

Code examples

These example code snippets show you how to perform the following with the Azure Blob storage client library for JavaScript:

• Get the connection string
• Create a container
• Upload blobs to a container
• List the blobs in a container
• Download blobs
• Delete a container

Get the connection string

The code below retrieves the connection string for the storage account from the environment variable created in the Configure your storage connection string section.

Add this code inside the main function:

// Retrieve the connection string for use with the application. The storage
// connection string is stored in an environment variable on the machine
// running the application called CONNECT_STR. If the environment variable is
// created after the application is launched in a console or with Visual Studio,
// the shell or application needs to be closed and reloaded to take the
// environment variable into account.
const CONNECT_STR = process.env.CONNECT_STR;

Create a container

Decide on a name for the new container. The code below appends a UUID value to the container name to ensure that it is unique.

Create an instance of the BlobServiceClient class by calling the fromConnectionString method. Then, call the getContainerClient method to get a reference to a container. Finally, call create to actually create the container in your storage account.

Add this code to the end of the main function:

// Create the BlobServiceClient object which will be used to create a container client
const blobServiceClient = await new BlobServiceClient.fromConnectionString(CONNECT_STR);

// Create a unique name for the container
const containerName = 'quickstart' + uuidv1();

console.log('\nCreating container...');
console.log('\t', containerName);

// Get a reference to a container
const containerClient = await blobServiceClient.getContainerClient(containerName);

// Create the container
await containerClient.create();

Upload blobs to a container

The following code snippet:

1. Creates a text string to upload to a blob.
2. Gets a reference to a BlockBlobClient object by calling the getBlockBlobClient method on the ContainerClient from the Create a container section.
3. Uploads the text string data to the blob by calling the upload method.

Add this code to the end of the main function:

// Create a unique name for the blob
const blobName = 'quickstart' + uuidv1() + '.txt';

// Get a block blob client
const blockBlobClient = containerClient.getBlockBlobClient(blobName);

console.log('\nUploading to Azure Storage as blob:\n\t', blobName);

// Upload data to the blob
const data = 'Hello, World!';
await blockBlobClient.upload(data, data.length);

List the blobs in a container

List the blobs in the container by calling the listBlobsFlat method. In this case, only one blob has been added to the container, so the listing operation returns just that one blob.

Add this code to the end of the main function:

console.log('\nListing blobs...');

// List the blob(s) in the container.
for await (const blob of containerClient.listBlobsFlat()) {
    console.log('\t', blob.name);
}

Download blobs

Download the previously created blob by calling the download method. The example code includes a helper function called streamToString which is used to read a Node.js readable stream into a string.

Add this code to the end of the main function:

// Get blob content from position 0 to the end
// In Node.js, get downloaded data by accessing downloadBlockBlobResponse.readableStreamBody
// In browsers, get downloaded data by accessing downloadBlockBlobResponse.blobBody
const downloadBlockBlobResponse = await blockBlobClient.download(0);
console.log('\nDownloaded blob content...');
console.log('\t', await streamToString(downloadBlockBlobResponse.readableStreamBody));

Add this helper function after the main function:

// A helper function used to read a Node.js readable stream into a string
async function streamToString(readableStream) {
  return new Promise((resolve, reject) => {
    const chunks = [];
    readableStream.on("data", (data) => {
      chunks.push(data.toString());
    });
    readableStream.on("end", () => {
      resolve(chunks.join(""));
    });
    readableStream.on("error", reject);
  });
}

Delete a container

The following code cleans up the resources the app created by removing the entire container using the ​delete method. You can also delete the local files, if you like.

Add this code to the end of the main function:

console.log('\nDeleting container...');

// Delete container
await containerClient.delete();

Run the code

This app creates a text string and uploads it to Blob storage. The example then lists the blob(s) in the container, downloads the blob, and displays the downloaded data.

From a console prompt, navigate to the directory containing the blob-quickstart-v12.py file, then execute the following node command to run the app.

node blob-quickstart-v12.js

The output of the app is similar to the following example:

Azure Blob storage v12 - JavaScript quickstart sample

Creating container...
         quickstart4a0780c0-fb72-11e9-b7b9-b387d3c488da

Uploading to Azure Storage as blob:
         quickstart4a3128d0-fb72-11e9-b7b9-b387d3c488da.txt

Listing blobs...
         quickstart4a3128d0-fb72-11e9-b7b9-b387d3c488da.txt

Downloaded blob content...
         Hello, World!

Deleting container...
Done

Step through the code in your debugger and check your Azure portal throughout the process. Check to see that the container is being created. You can open the blob inside the container and view the contents.

Next steps

In this quickstart, you learned how to upload, download, and list blobs using JavaScript.

To see Blob storage sample apps, continue to:

• To learn more, see the Azure SDK for JavaScript.
• For tutorials, samples, quick starts and other documentation, visit Azure SDK for JavaScript documentation.