Skip to content

Latest commit

 

History

History
351 lines (229 loc) · 20.8 KB

blob-upload-function-trigger-javascript.md

File metadata and controls

351 lines (229 loc) · 20.8 KB
titledescriptionauthorms.authorms.servicems.topicms.datems.devlangms.custom
Upload and analyze a file with Azure Functions (JavaScript) and Blob Storage
With JavaScript, learn how to upload an image to Azure Blob Storage and analyze its content using Azure Functions and Cognitive Services
diberry
diberry
storage
tutorial
05/13/2022
javascript
devx-track-js, devx-track-azurecli

JavaScript Tutorial: Upload and analyze a file with Azure Functions and Blob Storage

In this tutorial, you'll learn how to upload an image to Azure Blob Storage and process it using Azure Functions and Computer Vision. You'll also learn how to implement Azure Function triggers and bindings as part of this process. Together, these services will analyze an uploaded image that contains text, extract the text out of it, and then store the text in a database row for later analysis or other purposes.

Azure Blob Storage is Microsoft's massively scalable object storage solution for the cloud. Blob Storage is designed for storing images and documents, streaming media files, managing backup and archive data, and much more. You can read more about Blob Storage on the overview page.

Azure Functions is a serverless computer solution that allows you to write and run small blocks of code as highly scalable, serverless, event driven functions. You can read more about Azure Functions on the overview page.

In this tutorial, you'll learn how to:

[!div class="checklist"]

  • Upload images and files to Blob Storage
  • Use an Azure Function event trigger to process data uploaded to Blob Storage
  • Use Cognitive Services to analyze an image
  • Write data to Table Storage using Azure Function output bindings

Prerequisites

Create the storage account and container

The first step is to create the storage account that will hold the uploaded blob data, which in this scenario will be images that contain text. A storage account offers several different services, but this tutorial utilizes Blob Storage and Table Storage.

Visual Studio Code

  1. In Visual Studio Code, select Ctrl + Shift + P to open the command palette.

  2. Search for Azure Storage: Create Storage Account (Advanced).

  3. Use the following table to create the Storage resource.

    SettingValue
    NameEnter msdocsstoragefunction or something similar.
    Resource GroupCreate the msdocs-storage-function resource group you created earlier.
    Static web hostingNo.
    LocationChoose the region closest to you.

  4. In Visual Studio Code, select Shift + Alt + A to open the Azure Explorer.

  5. Expand the Storage section, expand your subscription node and wait for the resource to be created.

Create the container in Visual Studio Code

  1. Still in the Azure Explorer with your new Storage resource found, expand the resource to see the nodes.
  2. Right-click on Blob Containers and select Create Blob Container.
  3. Enter the name imageanalysis. This creates a private container.

Change from private to public container in Azure portal

This procedure expects a public container. To change that configuration, make the change in the Azure portal.

  1. Right-click on the Storage Resource in the Azure Explorer and select Open in Portal.
  2. In the Data Storage section, select Containers.
  3. Find your container, imageanalysis, and select the ... (ellipse) at the end of the line.
  4. Select Change access level.
  5. Select Blob (anonymous read access for blobs only then select Ok.
  6. Return to Visual Studio Code.

Retrieve the connection string in Visual Studio Code

  1. In Visual Studio Code, select Shift + Alt + A to open the Azure Explorer.
  2. Right-click on your storage resource and select Copy Connection String.
  3. paste this somewhere to use for later.
  4. Also make note of the storage account name msdocsstoragefunction for later as well.

Azure portal

Sign in to the Azure portal.

  1. In the search bar at the top of the portal, search for Storage and select the result labeled Storage accounts.

  2. On the Storage accounts page, select + Create in the top left.

  3. On the Create a storage account page, enter the following values:

    • Subscription: Choose your desired subscription.
    • Resource Group: Select Create new and enter a name of msdocs-storage-function, and then choose OK.
    • Storage account name: Enter a value of msdocsstoragefunction. The Storage account name must be unique across Azure, so you may need to add numbers after the name, such as msdocsstoragefunction123.
    • Region: Select the region that is closest to you.
    • Performance: Choose Standard.
    • Redundancy: Leave the default value selected.

    :::image type="content" source="./media/blob-upload-storage-function/portal-storage-create-small.png" alt-text="A screenshot showing how create a storage account in Azure." lightbox="media/blob-upload-storage-function/portal-storage-create.png":::

  4. Select Review + Create at the bottom and Azure will validate the information you entered. Once the settings are validated, choose Create and Azure will begin provisioning the storage account, which might take a moment.

Create the container

  1. After the storage account is provisioned, select Go to Resource. The next step is to create a storage container inside of the account to hold uploaded images for analysis.

  2. On the navigation panel, choose Containers.

  3. On the Containers page, select + Container at the top. In the slide out panel, enter a Name of imageanalysis, and make sure the Public access level is set to Blob (anonymous read access for blobs only. Then select Create.

    :::image type="content" source="./media/blob-upload-storage-function/portal-container-create-small.png" alt-text="A screenshot showing how to create a new storage container." lightbox="media/blob-upload-storage-function/portal-container-create.png":::

You should see your new container appear in the list of containers.

Retrieve the connection string

The last step is to retrieve our connection string for the storage account.

  1. On the left navigation panel, select Access Keys.

  2. On the Access Keys page, select Show keys. Copy the value of the Connection String under the key1 section and paste this somewhere to use for later. You'll also want to make a note of the storage account name msdocsstoragefunction for later as well.

    :::image type="content" source="./media/blob-upload-storage-function/storage-account-access-small.png" alt-text="A screenshot showing how to access the storage container." lightbox="media/blob-upload-storage-function/storage-account-access.png":::

These values will be necessary when we need to connect our Azure Function to this storage account.

Azure CLI

Azure CLI commands can be run in the Azure Cloud Shell or on a workstation with the Azure CLI installed.

To create the storage account and container, we can run the CLI commands seen below.

az group create --location eastus --name msdocs-storage-function \ az storage account create --name msdocsstorageaccount --resource-group msdocs-storage-function -l eastus --sku Standard_LRS \ az storage container create --name imageanalysis --account-name msdocsstorageaccount --resource-group msdocs-storage-function

You may need to wait a few moments for Azure to provision these resources.

After the commands complete, we also need to retrieve the connection string for the storage account. The connection string will be used later to connect our Azure Function to the storage account.

az storage account show-connection-string -g msdocs-storage-function -n msdocsstorageaccount

Copy the value of the connectionString property and paste it somewhere to use for later. You'll also want to make a note of the storage account name msdocsstoragefunction for later as well.

Create the Computer Vision service

Next, create the Computer Vision service account that will process our uploaded files. Computer Vision is part of Azure Cognitive Services and offers various features for extracting data out of images. You can learn more about Computer Vision on the overview page.

Azure portal

  1. In the search bar at the top of the portal, search for Computer and select the result labeled Computer vision.

  2. On the Computer vision page, select + Create.

  3. On the Create Computer Vision page, enter the following values:

    • Subscription: Choose your desired Subscription.
    • Resource Group: Use the msdocs-storage-function resource group you created earlier.
    • Region: Select the region that is closest to you.
    • Name: Enter in a name of msdocscomputervision.
    • Pricing Tier: Choose Free if it's available, otherwise choose Standard S1.
    • Check the Responsible AI Notice box if you agree to the terms

    :::image type="content" lightbox="./media/blob-upload-storage-function/computer-vision-create.png" source="./media/blob-upload-storage-function/computer-vision-create-small.png" alt-text="A screenshot showing how to create a new Computer Vision service." :::

  4. Select Review + Create at the bottom. Azure will take a moment validate the information you entered. Once the settings are validated, choose Create and Azure will begin provisioning the Computer Vision service, which might take a moment.

  5. When the operation has completed, select Go to Resource.

Retrieve the keys

Next, we need to find the secret key and endpoint URL for the Computer Vision service to use in our Azure Function app.

  1. On the Computer Vision overview page, select Keys and Endpoint.

  2. On the Keys and EndPoint page, copy the Key 1 value and the EndPoint values and paste them somewhere to use for later. The endpoint should be in the format of https://YOUR-RESOURCE-NAME.cognitiveservices.azure.com/

:::image type="content" source="./media/blob-upload-storage-function/computer-vision-endpoints.png" alt-text="A screenshot showing how to retrieve the Keys and URL Endpoint for a Computer Vision service." :::

Azure CLI

To create the Computer Vision service, we can run the CLI command below.

az cognitiveservices account create \ --name msdocs-process-image \ --resource-group msdocs-storage-function \ --kind ComputerVision \ --sku F1 \ --location eastus2 \ --yes

You may need to wait a few moments for Azure to provision these resources.

Once the Computer Vision service is created, you can retrieve the secret keys and URL endpoint using the commands below.

 az cognitiveservices account keys list \ --name msdocs-process-image \ --resource-group msdocs-storage-function \ az cognitiveservices account list \ --name msdocs-process-image \ --resource-group msdocs-storage-function --query "[].properties.endpoint"

Download and configure the sample project

The code for the Azure Function used in this tutorial can be found in this GitHub repository, in the JavaScript subdirectory. You can also clone the project using the command below.

git clone https://github.com/Azure-Samples/msdocs-storage-bind-function-service.git \ cd msdocs-storage-bind-function-service/javascript \ code .

The sample project accomplishes the following tasks:

  • Retrieves environment variables to connect to the storage account and Computer Vision service
  • Accepts the uploaded file as a blob parameter
  • Analyzes the blob using the Computer Vision service
  • Sends the analyzed image text to a new table row using output bindings

Once you've downloaded and opened the project, there are a few essential concepts to understand:

ConceptPurpose
FunctionThe Azure Function is defined by both the function code and the bindings. The function code is in ./ProcessImageUpload/index.js.
Triggers and bindingsThe triggers and bindings indicate that data which is expected into or out of the function and which service is going to send or receive that data. The trigger and bindings for this function is in ./ProcessImageUpload/function.json.

Triggers and bindings

The following function.json file defines the triggers and bindings for this function:

:::code language="JSON" source="~/msdocs-storage-bind-function-service/javascript/ProcessImageUpload/function.json" :::

  • Data In - The BlobTrigger ("type": "blobTrigger") is used to bind the function to the upload event in Blob Storage. The trigger has two required parameters:

    • path: The path the trigger watches for events. The path includes the container name,imageanalysis, and the variable substitution for the blob name. This blob name is retrieved from the name property.
    • name: The name of the blob uploaded. The use of the myBlob is the parameter name for the blob coming into the function. Don't change the value myBlob.
    • connection: The connection string of the storage account. The value StorageConnection matches the name in the local.settings.json file.

  • Data Out - The TableBinding ("type": "table") is used to bind the outbound data to a Storage table.

    • tableName: The name of the table to write the parsed image text value returned by the function. The table must already exist.
    • connection: The connection string of the storage account. The value StorageConnection matches the name in the local.settings.json file.

:::code language="javascript" source="~/msdocs-storage-bind-function-service/javascript/ProcessImageUpload/index.js" highlight="43-68":::

This code also retrieves essential configuration values from environment variables, such as the Blob Storage connection string and Computer Vision key. These environment variables are added to the Azure Function environment after it's deployed.

The default function also utilizes a second method called AnalyzeImage. This code uses the URL Endpoint and Key of the Computer Vision account to make a request to Computer Vision to process the image. The request returns all of the text discovered in the image. This text is written to Table Storage, using the outbound binding.

Configure local settings

To run the project locally, enter the environment variables in the ./local.settings.json file. Fill in the placeholder values with the values you saved earlier when creating the Azure resources.

Although the Azure Function code runs locally, it connects to the cloud-based services for Storage, rather than using any local emulators.

:::code language="json" source="~/msdocs-storage-bind-function-service/javascript/local.settings.json" highlight="6-10":::

Create Azure Functions app

You're now ready to deploy the application to Azure using a Visual Studio Code extension.

  1. In Visual Studio Code, select Shift + Alt + A to open the Azure explorer.

  2. In the Functions section, find and right-click the subscription, and select Create Function App in Azure (Advanced).

  3. Use the following table to create the Function resource.

    SettingValue
    NameEnter msdocsprocessimage or something similar.
    Runtime stackSelect a Node.js LTS version.
    OSSelect Linux.
    Resource GroupChoose the msdocs-storage-function resource group you created earlier.
    LocationChoose the region closest to you.
    Plan TypeSelect Consumption.
    Azure StorageSelect the storage account you created earlier.
    Application InsightsSkip for now.

  4. Azure provisions the requested resources, which will take a few moments to complete.

Deploy Azure Functions app

  1. When the previous resource creation process finishes, right-click the new resource in the Functions section of the Azure explorer, and select Deploy to Function App.
  2. If asked Are you sure you want to deploy..., select Deploy.
  3. When the process completes, a notification appears which a choice which includes Upload settings. Select that option. This copies the values from your local.settings.json file into your Azure Function app. If the notification disappeared before you could select it, continue to the next section.

Add app settings for Storage and Computer Vision

If you selected Upload settings in the notification, skip this section.

The Azure Function was deployed successfully, but it can't connect to our Storage account and Computer Vision services yet. The correct keys and connection strings must first be added to the configuration settings of the Azure Functions app.

  1. Find your resource in the Functions section of the Azure explorer, right-click Application Settings, and select Add New Setting.

  2. Enter a new app setting for the following secrets. Copy and paste your secret values from your local project in the local.settings.json file.

    Setting
    StorageConnection
    StorageAccountName
    StorageContainerName
    ComputerVisionKey
    ComputerVisionEndPoint

All of the required environment variables to connect our Azure function to different services are now in place.

Upload an image to Blob Storage

You're now ready to test out our application! You can upload a blob to the container, and then verify that the text in the image was saved to Table Storage.

  1. In the Azure explorer in Visual Studio Code, find and expand your Storage resource in the Storage section.
  2. Expand Blob Containers and right-click your container name, imageanalysis, then select Upload files.
  3. You can find a few sample images included in the images folder at the root of the downloadable sample project, or you can use one of your own.
  4. For the Destination directory, accept the default value, /.
  5. Wait until the files are uploaded and listed in the container.

View text analysis of image

Next, you can verify that the upload triggered the Azure Function, and that the text in the image was analyzed and saved to Table Storage properly.

  1. In Visual Studio Code, in the Azure Explorer, under the same Storage resource, expand Tables to find your resource.
  2. An ImageText table should now be available. Click on the table to preview the data rows inside of it. You should see an entry for the processed image text of an uploaded file. You can verify this using either the Timestamp, or by viewing the content of the Text column.

Congratulations! You succeeded in processing an image that was uploaded to Blob Storage using Azure Functions and Computer Vision.

Troubleshooting

Please use the following table to help troubleshoot issues during this procedure.

IssueResolution
await computerVisionClient.read(url); errors with Only absolute URLs are supportedMake sure your ComputerVisionEndPoint endpoint is in the format of https://YOUR-RESOURCE-NAME.cognitiveservices.azure.com/.

Clean up resources

If you're not going to continue to use this application, you can delete the resources you created by removing the resource group.

  1. Select Resource groups from the Azure explorer
  2. Find and right-click the msdocs-storage-function resource group from the list.
  3. Select Delete. The process to delete the resource group may take a few minutes to complete.
close