Ask Learn
Preview
Ask Learn is an AI assistant that can answer questions, clarify concepts, and define terms using trusted Microsoft documentation.
Please sign in to use Ask Learn.
Sign inThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
Many web application needs end-users to upload files for processing. And these files need to be stored in a persisted storage. One common practice is, developers write code to upload the file and save it on the webserver itself. This approach is OK if the file size is small and/or smaller number of uploads. Recommended approach is, let the browse upload the files to Azure Storage directly without need to talk to webserver. This option, frees up webserver for other business processing.
For browser to talk to Azure Storage, instead of exposing storage connection string, we can use SAS Key (Share Access Security). SAS key is valid only for limited time and has specific permissions like write but not read or list. For more details on SAS keys please see here
Here is quick sample to upload blob files to Azure Storage from a browser directly and then process it the server side.
Extract the above zip file and copy the azure-storage.blob.min.js to your application scripts folder. For ASP.NET MVC application, you can copy it to Script folder as shown below
In your client side code, add these lines
<script src="~/Scripts/azure-storage.blob.min.js">
//this Azure Storage JavaScript Client Library
</script>
<p>Select file to upload to blob</p>
<p>
</p>
<p>
<button>Upload to blob</button>
</p>
<p>
<button>Do server side processing </button>
</p>
<script>
var blobname;
function blobUpload() {
// blob client
var blobUri = 'https://STORAGENAME.blob.core.windows.net';
var blobService = AzureStorage.Blob.createBlobServiceWithSas(blobUri, 'SASKEY');
// blob upload
var file = document.getElementById('blobFile').files[0];
var customBlockSize = file.size > 1024 * 1024 * 32 ? 1024 * 1024 * 4 : 1024 * 512;
blobService.singleBlobPutThresholdInBytes = customBlockSize;
var filename = file.name.substring(0, file.name.lastIndexOf('.'));
var ext = file.name.substring(file.name.lastIndexOf('.'));
blobname = filename + '_' + Math.random().toString(16).slice(2) + ext;
var speedSummary = blobService.createBlockBlobFromBrowserFile('CONTAINER', blobname, file, { blockSize: customBlockSize }, function (error, result, response) {
if (error) {
// Upload blob failed
alert("blob upload failed : check CORS");
} else {
// Upload successfully
alert("blob upload successfull");
}
});
var bcheckList = false;
if (bcheckList) {
// blob list
blobService.listBlobsSegmented('CONTAINER', null, function (error, results) {
if (error) {
// List blobs error
alert("blob list failed : check SAS token");
} else {
for (var i = 0, blob; blob = results.entries[i]; i++) {
// blob object
alert("blob found : " + blob);
}
}
});
}
}
function serverside() {
var newURL = location.protocol + "//" + location.host + "/Home/Contact?id=" + blobname;
newURL = encodeURI(newURL)
//alert(newURL);
window.location = newURL;
}
</script>
Add following code on your server side
public ActionResult Contact(string id)
{
// id is blob file name
CloudStorageAccount storageAccount = null;
CloudBlobContainer cloudBlobContainer = null;
var storageConnectionString = "CONNECTION STRING TO STORAGE";
CloudStorageAccount.TryParse(storageConnectionString, out storageAccount);
CloudBlobClient cloudBlobClient = storageAccount.CreateCloudBlobClient();
cloudBlobContainer = cloudBlobClient.GetContainerReference("CONTAINER");
CloudBlockBlob cloudBlockBlob = cloudBlobContainer.GetBlockBlobReference(id);
ViewBag.Message = "Your contact page.";
return View();
}
Ask Learn is an AI assistant that can answer questions, clarify concepts, and define terms using trusted Microsoft documentation.
Please sign in to use Ask Learn.
Sign in