Automate resizing uploaded images using Event Grid

Azure Event Grid is an eventing service for the cloud. Event Grid enables you to create subscriptions to events raised by Azure services or third-party resources.

This tutorial is part two of a series of Storage tutorials. It extends the previous Storage tutorial to add serverless automatic thumbnail generation using Azure Event Grid and Azure Functions. Event Grid enables Azure Functions to respond to Azure Blob storage events and generate thumbnails of uploaded images. An event subscription is created against the Blob storage create event. When a blob is added to a specific Blob storage container, a function endpoint is called. Data passed to the function binding from Event Grid is used to access the blob and generate the thumbnail image.

You use the Azure CLI and the Azure portal to add the resizing functionality to an existing image upload app.

In this tutorial, you learn how to:

Prerequisites

To complete this tutorial:

• You must have completed the previous Blob storage tutorial: Upload image data in the cloud with Azure Storage.
• You must apply for and have been granted access to the Blob storage events functionality. Request access to Blob storage events before continuing with the other steps in the topic.

If you don't have an Azure subscription, create a free account before you begin.

Launch Azure Cloud Shell

The Azure Cloud Shell is a free Bash shell that you can run directly within the Azure portal. It has the Azure CLI preinstalled and configured to use with your account. Click the Cloud Shell button on the menu in the upper-right of the Azure portal.

The button launches an interactive shell that you can use to run the steps in this topic:

If you choose to install and use the CLI locally, this topic requires that you are running the Azure CLI version 2.0.14 or later. Run az --version to find the version. If you need to install or upgrade, see Install Azure CLI 2.0.

If you are not using Cloud Shell, you must first sign in using az login.

Enable Blob storage events

At this time, you must request access to the Blob storage events feature.

Request access to Blob storage events

You request access with the az feature register command.

az feature register --name storageEventSubscriptions --namespace Microsoft.EventGrid

Check your approval status

You will receive an email from Microsoft notifying you that you have been granted access to Blob storage events. You can verify the status of your access request at any time with the az feature show command.

az feature show --name storageEventSubscriptions --namespace Microsoft.EventGrid --query properties.state

After you have been granted access to the Blob storage events feature, this command returns a "Registered" value.

After you are registered, you can continue with this tutorial.

Create an Azure Storage account

Azure Functions requires a general storage account. Create a separate general storage account in the resource group by using the az storage account create command.

Storage account names must be between 3 and 24 characters in length and may contain numbers and lowercase letters only.

In the following command, substitute your own globally unique name for the general storage account where you see the <general_storage_account> placeholder.

az storage account create --name <general_storage_account> \
--location westcentralus --resource-group myResourceGroup \
--sku Standard_LRS --kind storage

Create a function app

You must have a function app to host the execution of your function. The function app provides an environment for serverless execution of your function code. Create a function app by using the az functionapp create command.

In the following command, substitute your own unique function app name where you see the <function_app> placeholder. The <function_app> is used as the default DNS domain for the function app, and so the name needs to be unique across all apps in Azure. In this case, <general_storage_account> is the name of the general storage account you created.

az functionapp create --name <function_app> --storage-account  <general_storage_account>  \
--resource-group myResourceGroup --consumption-plan-location westcentralus

Now you must configure the function app to connect to blob storage.

Configure the function app

The function needs the connection string to connect to the blob storage account. In this case, <blob_storage_account> is the name of the Blob storage account you created in the previous tutorial. Get the connection string with the az storage account show-connection-string command. The thumbnail image container name must also be set to thumbs. Add these application settings in the function app with the az functionapp config appsettings set command.

storageConnectionString=$(az storage account show-connection-string \
--resource-group myResourceGroup --name <blob_storage_account> \
--query connectionString --output tsv)

az functionapp config appsettings set --name <function_app> \
--resource-group myResourceGroup \
--settings myblobstorage_STORAGE=$storageConnectionString \
myContainerName=thumbs

You can now deploy a function code project to this function app.

Deploy the function code

The C# function that performs image resizing is available in this sample GitHub repository. Deploy this Functions code project to the function app by using the az functionapp deployment source config command.

In the following command, <function_app> is the same function app you created in the previous script.

az functionapp deployment source config --name <function_app> \
--resource-group myResourceGroup --branch master --manual-integration \
--repo-url https://github.com/Azure-Samples/function-image-upload-resize

The image resize function is triggered by an event subscription to a Blob created event. The data passed to the trigger includes the URL of the blob, which is in turn passed to the input binding to obtain the uploaded image from Blob storage. The function generates a thumbnail image and writes the resulting stream to a separate container in Blob storage. To learn more about this function, see the readme file in the sample repository.

The function project code is deployed directly from the public sample repository. To learn more about deployment options for Azure Functions, see Continuous deployment for Azure Functions.

Create your event subscription

An event subscription indicates which provider-generated events you want sent to a specific endpoint. In this case, the endpoint is exposed by your function. Use the following steps to create an event subscription from your function in the Azure portal:

1. In the Azure portal, click the arrow at the bottom left to expand all services, type functions in the Filter field, and then choose Function Apps.

   

2. Expand your function app, choose the imageresizerfunc function, and then select Add Event Grid subscription.

   

3. Use the event subscription settings as specified in the table.

   

   Setting	Suggested value	Description
   Name	imageresizersub	Name that identifies your new event subscription.
   Topic type	Storage accounts	Choose the Storage account event provider.
   Subscription	Your subscription	By default, your current subscription should be selected.
   Resource group	myResourceGroup	Select Use existing and choose the resource group you have been using in this topic.
   Instance	<blob_storage_account>	Choose the Blob storage account you created.
   Event types	Blob created	Uncheck all types other than Blob created. Only event types of Microsoft.Storage.BlobCreated are passed to the function.
   Subscriber endpoint	autogenerated	Use the endpoint URL that is generated for you.
   Prefix filter	/blobServices/default/containers/images/blobs/	Filters storage events to only those on the images container.

4. Click Create to add the event subscription. This creates an event subscription that triggers imageresizerfunc when a blob is added to the images container. Resized images are added to the thumbs container.

Now that the backend services are configured, you test the image resize functionality in the sample web app.

Test the sample app

To test image resizing in the web app, browse to the URL of your published app. The default URL of the web app is https://<web_app>.azurewebsites.net.

Click the Upload photos region to select and upload a file. You can also drag a photo to this region.

Notice that after the uploaded image disappears, a copy of the uploaded image is displayed in the Generated thumbnails carousel. This image was resized by the function, added to the thumbs container, and downloaded by the web client.

Next steps

In this tutorial, you learned how to:

Advance to part three of the Storage tutorial series to learn how to secure access to the storage account.

• To learn more about Event Grid, see An introduction to Azure Event Grid.
• To try another tutorial that features Azure Functions, see Create a function that integrates with Azure Logic Apps.