Uploading files directly to Blob Storage from the browser

Based on some work I did previously, to upload data to blobs from the browser, I thought I’d take it a step further and upload whole files.

The layout of the application should be exactly the same. The browser opens a page which is served from blob storage, it then obtains a shared access signature from a website using a JSONP request. The following node.js code will serve that signature, it’s the same as before:

var azure = require("azure");
var app = require('express')();
app.enable("jsonp callback");

var blobService = azure.createBlobService();
blobService.createContainerIfNotExists("container", function(error){});

app.get('/getsignature/:file', function(req, res){
	var url = blobService.generateSharedAccessSignature("container", req.params.file, {
	AccessPolicy : {
		Permissions : "rwdl",
		Expiry : getDate()
	res.jsonp({url: url.url()});


function getDate(){
	var date = new Date();
	date.setHours((date).getHours() + 1);
	return date;

In the broswer, you need some code which will get call this service, and retrieve the URL containing the shared access signature.

jQuery.ajax("http://website.com/getsignature/example.txt" , {
    dataType: "jsonp",
    success: function(x){ 
        bloburl = x.url; 

You then need some HTML to choose the file:

<form id="form1">
 <input type="file" name="fileToUpload" id="fileToUpload"/>
 <input type="button" onclick="uploadFile()" value="Upload" />

…and some code to upload the file to Blob Storage:

function uploadFile() {
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    xhr.open("PUT", bloburl);

Simple! This seems to work in Chrome, Firefox and IE10.

About these ads