Uploading Multiple Images to Azure Blob Storage: A Step-by-Step Guide

March 27, 2018 2 min read

Follow these simple steps:

Steps:

Create a storage account in Azure.https://docs.microsoft.com/en-us/azure/storage/common/storage-quickstart-create-account?tabs=portal
Install the package and set a key in web.config file
1. Click on Manage NuGet Packages to install packages
2. Install Windows Azure Storage
3. Set the Azure Account key and Container Name where we store images in a web.config file
Create one Controller in the App_Start folder name is “AzureHelper.cs” and then paste following code.


using System;
using System.Web.Http;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;
using System.IO;
using System.Web;
using Microsoft.WindowsAzure;
public class AzureHelper : ApiController
{
static string containerName = ConfigurationManager.AppSettings[“ContainerName”];
static CloudStorageAccount storageAccount = CloudStorageAccount.Parse(ConfigurationManager.AppSettings[“StorageConnectionString”]);
static CloudBlobClient cloudBlobClient = storageAccount.CreateCloudBlobClient();
static CloudBlobContainer cloudBlobContainer =cloudBlobClient.GetContainerReference(containerName);
public string UploadImage(HttpPostedFileBase postedImage, int partnerId, int selectedClient)
{
string path = Convert.ToString(partnerId + “/” + selectedClient + “/”);
string imageUrl = “”;
string result = “”;
try
{
if (cloudBlobContainer.CreateIfNotExists())
{
cloudBlobContainer.SetPermissions(
new BlobContainerPermissions
{
PublicAccess = BlobContainerPublicAccessType.Blob
});
}
string imageName = Guid.NewGuid().ToString() + “-” + Path.GetExtension(postedImage.FileName);
CloudBlockBlob cloudBlockBlob = cloudBlobContainer.GetBlockBlobReference(path + imageName);
cloudBlockBlob.Properties.ContentType = postedImage.ContentType;
cloudBlockBlob.UploadFromStream(postedImage.InputStream);
imageUrl = cloudBlockBlob.Uri.ToString();
if (imageUrl != “”)
{
result = imageUrl;
}
}
catch (Exception ex)
{
return result = imageUrl;
}
return imageUrl;
}
}

In Index.cshtml page writes following code for upload images and shows uploaded images.


@{
ViewBag.Title = “Home Page”;
var images = ViewBag.ImgName;
}
<div class=”jumbotron”>
<h1>Demo Project</h1>
<p class=”lead”>Add Watermark Text and Image to Photo using C#</p>
</div>
<div>
@using (Html.BeginForm(“UploadImages”, “Home”, FormMethod.Post, new { @class = “form-horizontal”, role = “form”, enctype = “multipart/form-data” }))
{
<label>Select image to upload:</label>
<input type=”file” name=”fileToUpload” id=”fileToUpload” multiple>
<input type=”submit” value=”Upload Image” name=”submit”>
}
</div>
@if (images != null)
{
foreach (var imgUrl in images)
{
<div>
<img src=”@imgUrl.imgUrl” />
</div>
}
}

In Index Action method write this code.


public ActionResult Index(string fileName)
{
ViewBag.ImgName = TempData["image"];
return View();
}

Write one Action in the Home Controller to call the Azure function write this code in the Home Controller.


public ActionResult UploadImages(IEnumerable fileToUpload)
{
List objUploadedImg = new List();
AzureHelper azureHelper = new AzureHelper();

foreach (HttpPostedFileBase img in fileToUpload)
{
	Models.ImageModel objImg = new Models.ImageModel();
	
	// Here 111 and 222 are static values for Azure path; you will change according to your requirement.
	objImg.imgUrl = azureHelper.UploadImage(img, 111, 222);
	objUploadedImg.Add(objImg);
}
TempData["image"] = objUploadedImg.ToList();
return RedirectToAction("Index", new { fileName = "" });
}

Example:

Upload Multiple Images In Azure Blob Storage

The source code shown in this article can be downloaded from here and Hire Azure developers today!

https://github.com/prajapatichintan/Upload–Images-In-Azure-Blob-Storage