Display an array of images from Azure Blobs with .Net6

AchilleScript 0
Viewed 44

I am a junior front-end developer, and I got a task where I have to take an Azure Blobs Container lets call it "thumbnails" , loop through and display it on the screen using .Net 6.

Basically, I have to make an image gallery in Dotnet 6 that takes the images from the Blob Container with DotNet6, add it to the View (MVC) and list it with AngularJS but many of my attempts has failed.

Made a small example in case if it is not clear what I want to achieve:

Image

My questions are:

  • How can I take data from Azure Storage with .net 6?
  • How can I create an array from it and pass it to the View?
azure-blob-storage .net-6.0 blob c# azure
2 Answers

you need to use the nugget Azure.Storage.Blobs. This package exposes many methods you can utilise.

IAsyncEnumerable<BlobItem> blobs = blobContainer.GetBlobsAsync(prefix: "");
await foreach (BlobItem blobItem in blobs)
{
    ...
}

import the using System.Linq.Async for this to work.

Check the official docs to see more details on constructing the blobContainer.

You can extract the base64 string value from the blobs and bind it in the UI directly.

WisdomSeeker0

In MVC

Controller:

  using System.Configuration;
    using System.IO;
    using System.Threading.Tasks;
    using System.Web;
    using Azure.Storage.Blobs;
    using Azure.Storage.Blobs.Models;
    using Microsoft.AspNetCore.Mvc;

    public class HomeController : Controller
    {
        const string blobContainerName = "tnail";
        static BlobContainerClient blobContainer;

        private IConfiguration _configuration;

        public HomeController(IConfiguration configuration)
        {
            _configuration = configuration;
        }
        public async Task<ActionResult> Index()
        {
            try
            {
                var s = _configuration.GetConnectionString("AConnectionString");

                BlobServiceClient blobServiceClient = new BlobServiceClient(s);

                blobContainer = blobServiceClient.GetBlobContainerClient(blobContainerName);
                await blobContainer.CreateIfNotExistsAsync(PublicAccessType.Blob);

                List<Uri> allBlobs = new List<Uri>();
                foreach (BlobItem blob in blobContainer.GetBlobs())
                {
                    if (blob.Properties.BlobType == BlobType.Block)
                        allBlobs.Add(blobContainer.GetBlobClient(blob.Name).Uri);
                }

                return View(allBlobs);
            }
            catch (Exception ex)
            {
                ViewData["message"] = ex.Message;
                ViewData["trace"] = ex.StackTrace;
                return View("Error");
            }
        }

Model:

namespace AzureBlobLearning.Models
{
    public class ErrorViewModel
    {
        public string? RequestId { get; set; }

        public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
    }
}

appsetting.json: Add Connectionstring data that you can find it the Azure portal, with the name of AConnectionString

View:

@if (Model != null && Model.Count > 0)
{
    foreach (var item in Model)
    {
        <div class="imageBlock">
            <a href="@item" target="_blank"><img class="thumb" src="@item" alt="images"/></a><br />
            <div class="deleteDiv"><img class="deleteIcon" src="~/Images/deleteImage.png" title="Delete Image" onclick="deleteImage('@item');" /></div>
        </div>
    }
}

See Sample: https://github.com/Azure-Samples/storage-blobs-dotnet-webapp

AchilleScript0
Related