Upload image to Azure blob with summernote

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;
}