Azure App Service or Storage Service with Static Serving How to Upload?

Question

I am looking for any examples on how to use either Blob Storage or App Service static web capability (announced at BUILD) to host a binary file upload that will go into the storage account where the service is located.

Thanks.

Answer 1

I will walk you through a Node.js example which you could upload, download blobs and so on...

Understanding Azure Blob Storage

The first step is to understand that 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.

Prerequisites

• An Azure account with an active subscription. Create an account for free.
• An Azure Storage account. Create a storage account.
• Node.js.

Setting up

Lets prepare a project to work with the Azure Blob storage client library v12 for JavaScript.

Create a new directory for the project. E.g:

• Create a project folder mkdir blob-quickstart-v12

• Go to the created folder cd blob-quickstart-v12

• Run npm init to create a "package.json" file and make sure it looks like this:

{
    "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"
    }
}

• Install package dependencies npm install

• Create a new file called "blob-quickstart-v12.js" and copy/paste the following 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));

Copy your credentials from the Azure portal

Your app must be authorized to make a request to Azure Storage. We should add your storage account credentials to the application as a connection string:

1. Sign in to the Azure portal.

2. Locate your storage account.

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

4. Copy the Connection string value under key1 and keep it.

Connection string

• Add this inside the main function. File "blob-quickstart-v12.js":

const AZURE_STORAGE_CONNECTION_STRING = '<paste-your-connection-string-here>';

Create a container

Let's create a new container. The code below appends a UUID value to the container name to ensure that it is unique.

IMPORTANT: Container names must be lowercase!!!

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 BlobServiceClient.fromConnectionString(AZURE_STORAGE_CONNECTION_STRING);

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

console.log('creating container: ', containerName);

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

// Create the container
const createContainerResponse = await containerClient.create();
console.log("container was created successfully. requestId: ", createContainerResponse.requestId);

Upload blobs to a container

The following code snippet uploads a string to a blob, from the created container section.

Add this code to the end of the main function:

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

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

console.log('uploading to azure storage as blob: ', blobName);

// Upload data to the blob
const data = 'Hello, World!';
const uploadBlobResponse = await blockBlobClient.upload(data, data.length);
console.log("blob was uploaded successfully. requestId: ", uploadBlobResponse.requestId);

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('downloaded blob content...');
console.log(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);
  });
}

Run the code

From a console prompt, navigate to the root directory containing the "blob-quickstart-v12.js" file, then execute:

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:  mycontainer-4a0780c0-fb72-11e9-b7b9-b387d3c488da

uploading to azure storage as blob: myfileb4a3128d0-fb72-11e9-b7b9-b387d3c488da.txt

downloaded blob content: Hello, World!

References: Microsoft