Azure Upload Blob without Page Refresh

Question

I'm following the Official Azure Blob Upload Documentation and I successfully implemented a blob uploading functionality. However the page refreshes after uploading and I need to make it in such as a way that the image is uploaded without the page having to refresh. Basically no postback.

Here's what I have so far:

       if (profile_pic_input.HasFile)
       {
                var image = Request.Files["profile_pic_input"];

                CloudStorageAccount storageAccount = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]);
                CloudBlobClient blobStorage = storageAccount.CreateCloudBlobClient();
                CloudBlobContainer container = blobStorage.GetContainerReference("photos");
                if (container.CreateIfNotExists())
                {
                    // configure container for public access
                    var permissions = container.GetPermissions();
                    permissions.PublicAccess = BlobContainerPublicAccessType.Container;
                    container.SetPermissions(permissions);
                }


                String tempName = GeneratePictureName();
                string uniqueBlobName = string.Format("photos/image_{0}{1}", tempName, Path.GetExtension(image.FileName));
                CloudBlockBlob blob = container.GetBlockBlobReference(uniqueBlobName);



                blob.Properties.ContentType = image.ContentType;
                blob.UploadFromStream(image.InputStream);
       }

Gaurav Mantri Gaurav Mantri · Accepted Answer · 2015-07-04T08:41:08

To avoid postback, you would need to use AJAX. Most of the common JavaScript frameworks like jQuery support that.

Now coming on to uploading files into blob storage using AJAX, there are essentially two ways you can do it:

Upload directly into Blob Storage from user's browser: If your users are using modern browsers which support HTML5, then they can directly upload files from their local computers into blob storage. Please see this link for more details: https://msdn.microsoft.com/en-us/library/azure/hh824678.aspx. Essentially what you would do is create a Shared Access Signature with at least Write permission and allow cross-origin requests (CORS) from your web application to your storage account. This way the files are transferred directly received into your storage account. I have also written a blog post about the same that you may find useful: http://gauravmantri.com/2013/12/01/windows-azure-storage-and-cors-lets-have-some-fun/.
Upload files from your user's browser to your web server and then transfer the file into blob storage. If you search for AJAX and File Upload, I'm sure you will find a lot of resources which will tell you how that would work.

My recommendation would be to go with option #1 as it is much faster and does not overload your web servers.

Azure Upload Blob without Page Refresh

1 Answers