Uploading Multiple Images to Azure Blob Storage: A Step-by-Step Guide
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
- Click on Manage NuGet Packages to install packages
- Install Windows Azure Storage
- Set the Azure Account key and Container Name where we store images in a web.config file
- Click on Manage NuGet Packages to install packages
- 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:
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