Upload Files🗒️ In Azure Blob Storage Using ASP.NET Core

Today, in this article, we will discuss how to develop a web application to store uploaded files into the Azure Blob Storage. Now, as we all know, Blob Storage is a part of the Azure Storage. So, first, we will discuss some basic concepts about Azure Storage and then, we will discuss how to store file data into the Azure Blob Storage. The Code example contains the both version of Asp.Net Core i.e. 2.1 and 3.1.

 

Definition of Azure Storage

 

Microsoft provides different ways to store data or information in Azure. We can use different database types like Azure SQL Server, Azure Cosmos DB, or Azure Table Storage. Also, we can use either Azure Queues or Event Hubs for storing and sending a message like an Email, SMS, etc. In the same way, we can use either Azure Files or Azure Blob Storage to store files in Azure. Normally Azure Storage contains four different data services. These four data services place together as a group and are named Azure Storage. Azure storage consists of Azure Blobs, Azure Files, Azure Queues, and Azure Tables. These four data storage services are always available in special consideration because they all are primitive and cloud-based storage services and can be used together in the same application. The below image shows all the elements of Azure Storage.

 

 

 

Storage Account

 

In Azure, Storage Account always acts as a container that consists of a multiple set of Azure Storage Service together. In Storage Account, only data services from the Azure Storage group can be included like Azure Blobs, Files, Queues, and Tables. So, basically, it acts as a group which contains multiple data services of Azure Storage. The below image demonstrates the basic concept of Azure Storage Accounts.

 

 

 

Prerequisites

1. Microsoft Visual Studio 2017
   
2. Account in Azure Portal.
   

If you don’t have any existing Azure account, then you can create a free trial account in the Azure portal using your email id. 

 

Create an Azure Storage Account

 

To create the Azure Storage Account in Azure Portal, first, you need to log in to the Azure Portal and then perform the below steps.

 

Step 1

 

Click on the Azure Storage Accounts option from the Resource Dashboard.

Step 2

 

On the Create Azure Storage Account, click on the Add button on the Storage Account page.

 

 

Step 3

 

Now, provide the related required information to create an Azure Storage account.

 

 

Step 4

 

In the above image, Storage Account Name means Account Name. Also, select Storage V2 options for availing the service of all four data services of Azure Storage Accounts.

 

Step 5

 

Now, click the "Review and Create" button.

 

Step 6

 

After the settings are validated, click "Create" to create the account.

 

Step 7

 

The account creation takes some time. Wait for the portal to display the notification telling that the deployment succeeded and click the notification.

 

Step 8

 

Once the deployment is succeeded, click the "Go to resource" option to open Storage Account.

 

Step 9

 

Once Storage Account is created, click on Access Keys options of the left panel and copy the ConnectionString value. This value is needed to be provided in our web application so that we can upload files in Azure Blob Storage.

 

 

 

Create a Web Application using ASP.NET Core in Visual Studio

 

Step 1

 

Now, open Microsoft Visual Studio 2017 and click on File --> New --> Projects.

 

 

Step 2

 

Select the Web Application project template and click the OK button.

 

 

Step 3

 

In the Project Template box, select Web Application (Model-View-Controller) options and click on the OK button.

 

Step 4

 

Now a blank project solution is ready.

 

Step 5

 

First, open the App.Config file and store the connections string to this file which we already copied from the Azure portal. 

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "AllowedHosts": "*",
  "BlobConnections": "",
  "ConnectionStrings": {
    "AccessKey": "DefaultEndpointsProtocol=https;AccountName=testblobdump;AccountKey=ADSSADS222SSDbfOcGSuHbKnTlExh3kieXy6zwMZ/F3vDnOGT1uV5oy1KEYZ3ui6WFhayHC5tLkCA==;EndpointSuffix=core.windows.net"
  }
}

Step 6

 

Now, add another Class Library Project to create the Service Layer.

 

Step 7

 

After adding the new projects, we need to install the below NuGet Packages to access the Azure Storage account using Windows Azure Storage client driver.

 

 

Step 8

 

Now, add another class library project for Data Context and add a class called Products and define the Product model class as below.

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Text;
using Microsoft.AspNetCore.Http;

namespace DataContext.Models
{
    [Table("Product", Schema = "Core")]
    public class Product
    {
        public Product()
        {
            CreatedDate = DateTime.Now;
        }

        [Key]
        public int ProductId { get; set; }

        [Required(ErrorMessage = "Please Enter Name")]
        [Column(TypeName = "varchar(50)")]
        public string Name { get; set; }

        public decimal UnitPrice { get; set; }

        [Required(ErrorMessage = "Please Enter Description")]
        [Column(TypeName = "varchar(500)")]
        public string Description { get; set; }

        [Column(TypeName = "varchar(50)")]
        public string ImageName { get; set; }

        [Column(TypeName = "varchar(250)")]
        public string ImagePath { get; set; }

        public DateTime CreatedDate { get; set; }

        public DateTime? UpdatedDate { get; set; }

        [NotMapped]
        public IFormFile File { get; set; }
    }
}

Step 9

 

Now, select the Service Layer Projects and Create a New Folder called AppConfig.

 

Step 10

 

Now, within this folder, add a new class file called AppConfiguration.cs where we will read the configuration file value by providing the key as below. 

using Microsoft.Extensions.Configuration;
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;

namespace ServiceLayer.AppConfig
{
    public static class AppConfiguration
    {
        private static IConfiguration currentConfig;

        public static void SetConfig(IConfiguration configuration)
        {
            currentConfig = configuration;
        }


        public static string GetConfiguration(string configKey)
        {
            try
            {
                string connectionString = currentConfig.GetConnectionString(configKey);
                return connectionString;
            }
            catch (Exception ex)
            {
                throw (ex);
            }
            return "";
        }

    }
}

Step 11

 

Now, add another class called BlobStorageService.cs and add the below code. This service is basically responsible to store the uploaded file byte contained in the Azure Blob Storage. When it will upload the file in blob storage, it first creates a container called Upload and then within the container create a logical folder with the current date, and then within that logical folder original file will be stored. But in this case, we need to remember one thing very clearly that in Azure Blob Storage, there is no option for creating a folder. We can divide uploaded files logically in a date-wise, month-wise, or year wise subgrouping. This can be done with the help of the file name.

 

For example, suppose we provide a file name like this,

String filename = “01-Jan-2019/abcwelcome.pdf”

In this case, when this particular file is uploaded in Azure Blob Storage, then Azure creates a logical group named “01-Jan-2019” and then stores the file abcwelcome.pdf within that logical group. But, in normal view as from the Azure portal, it will display just like folder file structure the same as windows explorer.

 

BlobStorageService.cs 

using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;
using ServiceLayer.AppConfig;
using System;
using System.Collections.Generic;
using System.IO;
using System.Threading.Tasks;

namespace ServiceLayer
{
    public class BlobStorageService
    {
        string accessKey = string.Empty;

        public BlobStorageService()
        {
            this.accessKey = AppConfiguration.GetConfiguration("AccessKey");
        }

        public string UploadFileToBlob(string strFileName, byte[] fileData, string fileMimeType)
        {
            try
            {

                var _task = Task.Run(() => this.UploadFileToBlobAsync(strFileName, fileData, fileMimeType));
                _task.Wait();
                string fileUrl = _task.Result;
                return fileUrl;
            }
            catch (Exception ex)
            {
                throw (ex);
            }
        }

        public async void DeleteBlobData(string fileUrl)
        {
            Uri uriObj = new Uri(fileUrl);
            string BlobName = Path.GetFileName(uriObj.LocalPath);

            CloudStorageAccount cloudStorageAccount = CloudStorageAccount.Parse(accessKey);
            CloudBlobClient cloudBlobClient = cloudStorageAccount.CreateCloudBlobClient();
            string strContainerName = "uploads";
            CloudBlobContainer cloudBlobContainer = cloudBlobClient.GetContainerReference(strContainerName);

            string pathPrefix = DateTime.Now.ToUniversalTime().ToString("yyyy-MM-dd") + "/";
            CloudBlobDirectory blobDirectory = cloudBlobContainer.GetDirectoryReference(pathPrefix);
            // get block blob refarence
            CloudBlockBlob blockBlob = blobDirectory.GetBlockBlobReference(BlobName);

            // delete blob from container
            await blockBlob.DeleteAsync();
        }


        private string GenerateFileName(string fileName)
        {
            string strFileName = string.Empty;
            string[] strName = fileName.Split('.');
            strFileName = DateTime.Now.ToUniversalTime().ToString("yyyy-MM-dd") + "/" + DateTime.Now.ToUniversalTime().ToString("yyyyMMdd\\THHmmssfff") + "." + strName[strName.Length - 1];
            return strFileName;
        }

        private async Task<string> UploadFileToBlobAsync(string strFileName, byte[] fileData, string fileMimeType)
        {
            try
            {
                CloudStorageAccount cloudStorageAccount = CloudStorageAccount.Parse(accessKey);
                CloudBlobClient cloudBlobClient = cloudStorageAccount.CreateCloudBlobClient();
                string strContainerName = "uploads";
                CloudBlobContainer cloudBlobContainer = cloudBlobClient.GetContainerReference(strContainerName);
                string fileName = this.GenerateFileName(strFileName);

                if (await cloudBlobContainer.CreateIfNotExistsAsync())
                {
                    await cloudBlobContainer.SetPermissionsAsync(new BlobContainerPermissions { PublicAccess = BlobContainerPublicAccessType.Blob });
                }

                if (fileName != null && fileData != null)
                {
                    CloudBlockBlob cloudBlockBlob = cloudBlobContainer.GetBlockBlobReference(fileName);
                    cloudBlockBlob.Properties.ContentType = fileMimeType;
                    await cloudBlockBlob.UploadFromByteArrayAsync(fileData, 0, fileData.Length);
                    return cloudBlockBlob.Uri.AbsoluteUri;
                }
                return "";
            }
            catch (Exception ex)
            {
                throw (ex);
            }
        }
    }
}

Step 12

 

Now, go to the data context layer and create the data context layer for storing the file information in the SQL database using the Entity Framework concept.

 

IUnitOfWork.cs

using DataContext;
using DataContext.Abstractions;

namespace DataContext
{
    public interface IUnitOfWork
    {
        IProductRepository ProductRepo { get; }

        int SaveChanges();
    }
}

UnitOfWork.cs

using DataContext.Abstractions;
using DataContext.DataContext;
using DataContext.Implementation;
using Microsoft.EntityFrameworkCore;

namespace DataContext
{
    public class UnitOfWork : IUnitOfWork
    {
        private DbContext db;
        public UnitOfWork()
        {
            db = new EFDBContext();
        }

        private IProductRepository _ProductRepo;
        public IProductRepository ProductRepo
        {
            get
            {
                if (_ProductRepo == null)
                    _ProductRepo = new ProductRepository(db);

                return _ProductRepo;
            }
        }

        public int SaveChanges()
        {
            return db.SaveChanges();
        }
    }
}

IRepository.cs

using System.Collections.Generic;

namespace DataContext.Abstractions
{
    public interface IRepository<TEntity> where TEntity : class
    {
        void Add(TEntity model);

        IEnumerable<TEntity> GetAll();

        TEntity GetById(object Id);

        void Modify(TEntity model);

        void Delete(TEntity model);

        void DeleteById(object Id);
    }
}

Repository.cs

using DataContext.Abstractions;
using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
using System.Linq;

namespace DataContext.Implementation
{
    public class Repository<TEntity> : IRepository<TEntity> where TEntity : class
    {
        protected DbContext db { get; set; }

        public void Add(TEntity model)
        {
            db.Set<TEntity>().Add(model);
        }

        public void Delete(TEntity model)
        {
            db.Set<TEntity>().Remove(model);
        }

        public void DeleteById(object Id)
        {
            TEntity entity = db.Set<TEntity>().Find(Id);
            this.Delete(entity);
        }

        public IEnumerable<TEntity> GetAll()
        {
            return db.Set<TEntity>().ToList();
        }

        public TEntity GetById(object Id)
        {
            return db.Set<TEntity>().Find(Id);
        }

        public void Modify(TEntity model)
        {
            db.Entry<TEntity>(model).State = EntityState.Modified;
        }
    }
}

EFDataContext.cs

using DataContext.Models;
using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Text;

namespace DataContext.DataContext
{
   public class EFDBContext :DbContext
    {
        public EFDBContext()
        {

        }

        public EFDBContext(DbContextOptions<EFDBContext> options) : base(options)
        {

        }

        public DbSet<Product> Product { get; set; }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            if (!optionsBuilder.IsConfigured)
            {
                optionsBuilder.UseSqlServer(@"data source=xxxx; initial catalog=ProjectDB;persist security info=True;user id=sa;password=xxxxxxx;");
            }
            base.OnConfiguring(optionsBuilder);
        }
    }
}

ProductRepository.cs

using DataContext.Abstractions;
using DataContext.DataContext;
using DataContext.Models;
using Microsoft.EntityFrameworkCore;

namespace DataContext.Implementation
{
    public class ProductRepository : Repository<Product>, IProductRepository
    {
        private EFDBContext context
        {
            get
            {
                return db as EFDBContext;
            }
        }

        public ProductRepository(DbContext db)
        {
            this.db = db;
        }
    }
}

Step 13

 

Now, go to the main projects; i.e., MVC Application projects.

 

Step 14

 

Select the Controller folder and add a new MVC Controller Name ProductsController.cs

 

Step 15

 

Now, within the controller class, write down the below code within the Index Method.

public IActionResult Index()
        {
            return View(_context.ProductRepo.GetAll());
        }

Step 16

 

Now, see a new view against the Index method by clicking the right mouse button. A new view has been added in the view folder. Now add the below code in the view file. 

@model DataContext.Models.Product

@{
    ViewData["Title"] = "Details";
}

<h2>Details</h2>

<div>
    <h4>Product</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Name)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Name)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.UnitPrice)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.UnitPrice)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Description)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Description)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.ImageName)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.ImageName)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.ImagePath)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.ImagePath)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.CreatedDate)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.CreatedDate)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.UpdatedDate)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.UpdatedDate)
        </dd>
    </dl>
</div>
<div>
    <a asp-action="Edit" asp-route-id="@Model.ProductId">Edit</a> |
    <a asp-action="Index">Back to List</a>
</div>

Step 17

 

Now, create a new method for creating in the ProductsController and add related view against that action method. 

public IActionResult Create()
       {
           return View();
       }

Create.cshtml

@model DataContext.Models.Product

@{
    ViewData["Title"] = "Create";
}

<h2>Create</h2>

<h4>Product</h4>
<hr />
@using (Html.BeginForm("Create", "Products", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.UnitPrice, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.UnitPrice, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.UnitPrice, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.File, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.File, new { type = "file" })
                @Html.ValidationMessageFor(m => m.File)
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Step 18

 

Now, create an action method for saving the data and write down the below code.

[HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Create(Product product)
        {
            if (ModelState.IsValid)
            {

                #region Read File Content

                var uploads = Path.Combine(env.WebRootPath, "uploads");
                bool exists = Directory.Exists(uploads);
                if (!exists)
                    Directory.CreateDirectory(uploads);

                var fileName = Path.GetFileName(product.File.FileName);
                var fileStream = new FileStream(Path.Combine(uploads, product.File.FileName), FileMode.Create);
                string mimeType = product.File.ContentType;
                byte[] fileData = new byte[product.File.Length];

                BlobStorageService objBlobService = new BlobStorageService();

                product.ImagePath = objBlobService.UploadFileToBlob(product.File.FileName, fileData, mimeType);
                #endregion

                _context.ProductRepo.Add(product);
                _context.SaveChanges();
                return RedirectToAction(nameof(Index));
            }
            return View(product);
        }

Step 19

 

Now, run the application and try to insert a new record from the application.

 

 

 

Create Mode View.

 

 

 

Step 20

 

Now, go back to the Azure portal and check if the newly inserted data is shown in the data explorer or not.

 

 

 

Step 21

 

Similarly, add the edit records and delete records functionality along with the related view. 

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;
using DataContext.DataContext;
using DataContext.Models;
using System.IO;
using Microsoft.AspNetCore.Hosting;
using DataContext;
using System.Net.Http;
using ServiceLayer;
using Microsoft.Extensions.Configuration;

namespace BlobStorage_File_Upload.Controllers
{
    public class ProductsController : Controller
    {
        private UnitOfWork _context;
        IHostingEnvironment env;
        private NumberToWord objNumberToWord;

        public ProductsController(IHostingEnvironment _env)
        {
            this._context = new UnitOfWork();
            env = _env;
            this.objNumberToWord = new NumberToWord();
        }

        // GET: Products
        public IActionResult Index()
        {
            return View(_context.ProductRepo.GetAll());
        }

        // GET: Products/Details/5
        public IActionResult Details(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var product = _context.ProductRepo.GetById(id);
            if (product == null)
            {
                return NotFound();
            }

            return View(product);
        }

        // GET: Products/Create
        public IActionResult Create()
        {
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Create(Product product)
        {
            if (ModelState.IsValid)
            {

                #region Read File Content

                var uploads = Path.Combine(env.WebRootPath, "uploads");
                bool exists = Directory.Exists(uploads);
                if (!exists)
                    Directory.CreateDirectory(uploads);

                string fileName = Path.GetFileName(product.File.FileName);
                byte[] fileData;
                using (var target = new MemoryStream())
                {
                    product.File.CopyTo(target);
                    fileData = target.ToArray();
                }


                //var fileStream = new FileStream(Path.Combine(uploads, product.File.FileName), FileMode.Create);
                string mimeType = product.File.ContentType;
                //= new byte[product.File.Length];

                BlobStorageService objBlobService = new BlobStorageService();

                product.ImagePath = objBlobService.UploadFileToBlob(product.File.FileName, fileData, mimeType);
                #endregion

                _context.ProductRepo.Add(product);
                _context.SaveChanges();
                return RedirectToAction(nameof(Index));
            }
            return View(product);
        }

        // GET: Products/Edit/5
        public IActionResult Edit(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var product = _context.ProductRepo.GetById(id);
            if (product == null)
            {
                return NotFound();
            }
            return View(product);
        }

        // POST: Products/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Edit(int id, [Bind("ProductId,Name,UnitPrice,Description,ImageName,ImagePath,CreatedDate,UpdatedDate")] Product product)
        {
            if (id != product.ProductId)
            {
                return NotFound();
            }

            if (ModelState.IsValid)
            {
                try
                {
                    _context.ProductRepo.Modify(product);
                    _context.SaveChanges();
                }
                catch (DbUpdateConcurrencyException)
                {
                    if (!ProductExists(product.ProductId))
                    {
                        return NotFound();
                    }
                    else
                    {
                        throw;
                    }
                }
                return RedirectToAction(nameof(Index));
            }
            return View(product);
        }

        // GET: Products/Delete/5
        public IActionResult Delete(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var product = _context.ProductRepo.GetById(id);
            if (product == null)
            {
                return NotFound();
            }

            return View(product);
        }

        // POST: Products/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public IActionResult DeleteConfirmed(int id)
        {
            var product = _context.ProductRepo.GetById(id);
            BlobStorageService objBlob = new BlobStorageService();
            objBlob.DeleteBlobData(product.ImagePath);
            _context.ProductRepo.Delete(product);
            _context.SaveChanges();
            return RedirectToAction(nameof(Index));
        }

        private bool ProductExists(int id)
        {
            return _context.ProductRepo.GetAll().Any(e => e.ProductId == id);
        }
    }
}

Step 22

 

Now run the application and create new products with the help of Product UI. 

 

 

 

 

 

Conclusion

 

Now, in this article, we discussed how to insert, update, or delete file DB Database in Azure portal using ASP.NET Core. I hope this article will help you understand. In the next article, we will discuss how to upload files in Azure Blob Storage. For any further query or clarification, ping me.