Upload image to Azure blob with summernote - azure

Question

public class StorageService
{
CloudStorageAccount storageAccount = CloudStorageAccount.Parse("DefaultEndpointsProtocol=removed for this post");
public async Task Upload(string id, Stream data)
{
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
// Retrieve a reference to a container.
CloudBlobContainer container = blobClient.GetContainerReference("images");
await container.CreateIfNotExistsAsync();
container.SetPermissions(
new BlobContainerPermissions
{
PublicAccess = BlobContainerPublicAccessType.Blob
});
// Retrieve reference to a blob named "myblob".
CloudBlockBlob blockBlob = container.GetBlockBlobReference(id);
await blockBlob.UploadFromStreamAsync(data, data.Length);
}
public async Task UploadBlogPhoto(string id, Stream data)
{
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
// Retrieve a reference to a container.
CloudBlobContainer container = blobClient.GetContainerReference("mycontainer");
await container.CreateIfNotExistsAsync();
container.SetPermissions(
new BlobContainerPermissions
{
PublicAccess = BlobContainerPublicAccessType.Blob
});
// Retrieve reference to a blob named "myblob".
CloudBlockBlob blockBlob = container.GetBlockBlobReference(id);
await blockBlob.UploadFromStreamAsync(data, data.Length);
}
}
So I have the StorageServices class and I use the first method, Upload, to upload users' profile pics.
here is the markup:
using (Html.BeginForm("UploadPhoto", "Manage", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="browseimg">
<input type="file" class="display-none" name="file" id="files" onchange="this.form.submit()" />
</div>
}
<button class="btn btn-primary width-100p main-bg round-border-bot" id="falseFiles">
Upload billede
</button>
This is the summernote button for uploading a photo. The post uploads to a database. However, is there a way for the text to be uploaded to the database and the image to Azure blob? Would I need to do it asynchronously by first uploading the picture and adding the azure blob's URL into summernote, can it be done?

Answer 1

As Gaurav said, you could perform both operations in your upload functions. In my opinion, I recommend that you perform both operations in your upload action, in order to ensure data consistency. Here I provide you with a code sample to have a better understanding of it.
ManageController.cs
/// <summary>
/// Upload photo with description
/// </summary>
/// <param name="imageNote">description of the photo</param>
/// <returns></returns>
public async Task<JsonResult> UploadPhoto(string imageNote)
{
string operationResult = string.Empty;
string uploadedImageUrl = string.Empty;
uploadedImageUrl = await UploadImageToBlob();
//make sure the image is uploaded successfully to Azure Blob
if (!string.IsNullOrEmpty(uploadedImageUrl))
{
//insert the image(blob) Url and imageNote to your database
operationResult = "Operation is successful!";
}
else
operationResult = "Image upload failed, please check and submit again!";
return Json(new
{
Message = operationResult
});
}
/// <summary>
/// Upload photo to Azure Blob Storage
/// </summary>
/// <returns>the new Blob(photo) Url</returns>
private async Task<string> UploadImageToBlob()
{
string uploadedImageUrl = string.Empty;
try
{
var files = Request.Files;
if (files != null && files.Count > 0)
{
var file = files[0];
string blobName = Path.GetFileName(file.FileName);
#region upload image to Azure Blob and retrieve the Blob Url
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(CloudConfigurationManager.GetSetting("brucechenStorage"));
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
// Retrieve a reference to a container.
CloudBlobContainer container = blobClient.GetContainerReference("images");
await container.CreateIfNotExistsAsync();
// Retrieve reference to a blob named "blobName".
CloudBlockBlob blockBlob = container.GetBlockBlobReference(blobName);
await blockBlob.UploadFromStreamAsync(file.InputStream);
uploadedImageUrl = blockBlob.Uri.ToString();
#endregion
}
}
catch (Exception e)
{
//TODO:log
}
return uploadedImageUrl;
}