Azure Blob Storage with Xamarin.Forms

This is the first post of a new series on Azure Storage & Xamarin. Besides, this entry is part of The Second Annual C# Advent, which is an initiative by Matthew D. Groves. Read other interesting publications and learn from the experts in several topics related with C#, .NET and much more technologies!

When we develop mobile applications, sometimes we need to store images, PDF files, text files… actually, we need to store any type of file on the cloud, so they can be available to our users across devices.

Azure Storage, one of the services included in the Azure offer, can be used to solve this need. You can  use it to store unstructured data such as text or binary data (blobs), messages (queue), rows of information (tables), or file-systems (file). Microsoft provides SDKs for our apps in several languages and technologies (C# and .NET included of course) or we can also use the REST API to implement it.

In this post you’ll learn how to develop a mobile application which stores images on the cloud by using the WindowsAzure.Storage SDK! The source code is available on GitHub, of course, download it from here.

Step 1. Go to the Azure Portal and create an Storage account:

Step 2. Select (or create) a resource group for your storage account, type a name for the storage account (which is globally unique) and select a location which is close to your users (to reduce latency when transferring data). You can leave (or change) the rest of the options according to your needs (replication, account kind, and so on).

Step 3. Go to the resource after it is created, and click on Access keys. This is sensitive data which you’ll use to connect your apps to the cloud. The most important element here is the Connection string, so copy it (we’ll use it later in the code).

Step 4. Now open Visual Studio and create a Mobile App (Xamarin.Forms) project with the name OnlineAlbumMobileApp.

Step 5. The code sharing strategy is .NET Standard.

Step 6. After it is created, right click on the solution and select Manage Nuget Packages for Solution

Step 7. Search and install the WindowsAzure.Storage package in all the projects included in the solution. This is actually the Storage SDK which will allow us to include cloud storage support in our mobile apps seamlessly.

Step 8. In the .NET Standard project OnlineAlbumMobileApp (which by the way shares the main functionality across platforms), create the BlobStorageService class (inside Services folder). This one handles the Blob Storage functionality. You can identify three main elements in the code:

• A CloudStorageAccount instance which uses the CloudStorageAccount.Parse method to set up a connection to the storage account that you just created in Azure (the parameter is actually the Connection String from Step 3 -which is included in the Helpers/Constants.cs file in the project-).

• A CloudBlobClient, which is a client connected to the storage account. It uses the connection string from the CloudStorageAccount.

• A CloudBlobContainer, which is a direct pointer to a Container in our cloud Storage Account (think of it as a folder). This container will be created from our application (it is also possible to create it in the portal).

These elements are used to list all the files (GetBlobList method), upload a new file (UploadBlob method), and remove a file (Delete Blob) in the container:

• To list all the files you use the ListBlobsSegmentedAsync method of the CloudBlobContainer. You use a continuation token because the information is retrieved in pages (segments).
• To add a new file to the container, the GetBlockBlobReference (to create a blob instance) and UploadFromStreamAsync (to upload the file content) methods are used. After the blob is stored in the container, it is accessible for download through a URL.
• To remove a blob from the container, the DeleteIfExistsAsync method is used. Before calling that method, you need to get a reference to the blob which you want to delete, and you achieve that by using the GetBlockBlobReference method.

This is the actual code that implements what was just explained in this step.

Step 9. The rest of the code is really easy:

• To select a photo from the device gallery, you can use James Montemagno’s Xam.Plugin.Media. Check the implementation in our project in the ImageService class.
• Create two Content Pages:
  • AlbumPage contains a ListView to show all the pictures stored on the cloud. This list is filled up with the collection of blobs retrieved by the BlobStorageService.GetBlobList method. The user can select a picture and go to the second page.
  • ImagePage is a page which allows the user to upload a new image from the gallery, see the one previously selected or delete it from the blob storage.

Step 10. You can see the app working after you run and deploy it on an emulator or device. This is a test for a Windows 10 app.

First, click on Add Image button:

Second, click on Select.

And after you select an image from the gallery it is time to Upload it.

You’ll see the result of this operation (hopefully, a successful one):

You’ll be redirected to the first page, and you’ll see the image was added (along with the a randomly-generated filename, which we do by using a new GUID before uploading it to the storage account).

For this second test, I uploaded another image. Then I clicked on it:

The Delete button is available, so let’s click on it:

We confirm that we want to delete it from the storage:

And a message will be displayed:

The image was actually removed from the storage, and so it won’t be displayed in the list anymore.

As you just saw, it is really easy to implement cloud storage in our Xamarin mobile apps.  If you want to learn more about it, just remember that the documentation is always your friend.

Perhaps you are thinking.: “Hey, if my files are on the cloud, does it mean they are publicly available for everyone with the blob URL?”. Well, the answer for our app is YES because when we created the container and uploaded the blobs we specified a public access type. But don’t worry, we can add security in our storage account and grant limited access only to signed users by implementing a Shared Access Signature (SAS) token instead of sharing the key in our connection string.

You’ll learn about it in the next post =)

Thanks for your visit and I hope this publication was useful for you. Don’t forget to share it with your peeps and colleagues 🙂

See you next time,

-Luis

PS: don’t forget to follow the Second Annual C# Advent to continue learning about this incredible technology.