How to create CRUD application using Azure Blob storage service?

Microsoft’s Azure Blob storage service is really a good option for your application if you are storing images, videos and any file. In this post, I’ll tell you how to create CRUD application using Azure Blob storage service. By CRUD application I mean create, read, update and delete a blob either for a user or system use.

Both the posts above use same project and I’m extending that project to make it a CRUD application. The source code can be found using this repository. Feel free to use the code or fork this repository. This application basically illustrates how to allow a user to upload image(s), list all the images by reading all of the images from a container and allow user to delete the images.

Access Azure Blob Service from front-end application

As such I’m using ASP.NET MVC for front-end, like most of the Azure services, to consume this blob service we need a client package from Nuget Package Manager in the project named as WindowsAzure.Storage and the package version that is used for this post is 8.2.0. The client allows to connect to all types of storages in Azure like blob, table, file and queues. For blob storage, we will be using CloudBlobClient class.

Image Storage Service

The extended Image Storage Service code is shown below. This class named ImageStorageService encapsulates usage of CloudBlobClient class instance. The controller of my application doesn’t need to use the client directly. Please read the basics of using CloudBlobClient class here.

As you can see in the constructor, the client uses an existing container to add or read or delete blobs. In the real world, a user may have access to one or more containers where a container can be created dynamically on-demand by using the CreateBlobContainer class.

Also, the primary key should be stored at a safe place. Definitely not in code or web.config file. Utilise Azure’s Key Vault for this purpose in your applications.

Create/Update

Below is the SaveImage method from the code above that creates/saves the blob to the container. It take the stream as input of the file like image or video and saves it to the container by uploading it.

A unique name is used so that we can get a reference to a blob and as such no blob exists by that name, the container creates a blob for the next step i.e. upload from stream. For updating a blob, an existing blob reference can be used in the same way and the modified or new stream can be uploaded in the same manner as shown below:

Code that saves image as blob to container

C#

1

2

3

4

5

6

7

8

9

publicasyncTask<string>SaveImage(Stream imageInputStream)

{

stringid=Guid.NewGuid().ToString();

CloudBlockBlob blob=_container.GetBlockBlobReference(id);

awaitblob.UploadFromStreamAsync(imageInputStream);

returnid;

}

Read

The method named GetImages is used to read all the blobs from the container. We are only interested in blobs of type CloudBlockBlob as that is the type of blob this application actually saved so it makes sense to read just that type.

Blob Uri with Shared Access Signature (SAS)

Controller

Refer to the project to see the views for this application. The controller code is mentioned below that has some action to take care of get and post actions. Post action is used to upload and delete an image.

Controller code to handle user request

C#

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

publicclassImagesController:Controller

{

privateImageStorageService _imageStoreService;

publicImagesController()

{

_imageStoreService=newImageStorageService();

}

publicActionResult Index()

{

List<CloudBlockBlob>blobs=_imageStoreService.GetImages();

returnView(blobs);

}

[HttpPost,ValidateAntiForgeryToken]

publicasyncTask<ActionResult>Upload(HttpPostedFileBase image)

{

if(image!=null)

{

stringimageId=await_imageStoreService.SaveImage(image.InputStream);

returnRedirectToAction("ShowImage",new{id=imageId});

}

returnView("Index");

}

publicActionResult ShowImage(stringid)

{

// use this for container that has access type set to Blob

// Uri imageUri = _imageStoreService.GetResourceUri(id);

varviewModel=newImageViewerViewModel()

{

Uri=_imageStoreService.GetResourceUriWithSas(id),

ResourceId=id

};

returnView(viewModel);

}

[HttpPost,ValidateAntiForgeryToken]

publicasyncTask<ActionResult>DeleteImage(stringid)

{

if(id==null)thrownewArgumentNullException(nameof(id));

await_imageStoreService.DeleteImage(id);

returnRedirectToAction("Index");

}

}

This sums up my post to explain how to create CRUD application using Azure Blob storage service. Refer to the repository to play with this project. Please subscribe to my website to get updates for similar posts.

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.