Uploading Images to Azure Storage from AngularJS App

2 minute read | By Prashanth Madi

Azure Storage is the cloud storage solution for modern applications that rely on durability, availability, and scalability to meet the needs of their customers.

More Info : https://azure.microsoft.com/en-us/documentation/articles/storage-python-how-to-use-blob-storage/

I had a few customers  asking how to create an application that can upload images from AngularJS without a backend App, so I decided to go ahead and create a sample application with this implementation

  • Navigate to portal and create a new storage account


  • Create a container and provide required access level


  • Copy Access Key from portal

cors9 Make a note of  below items during above steps

  1. Storage account name
  2. Container name
  3. Access Key
  • Create an Azure Web App - Optional Steps (if you are using Azure Web Apps) cors1
  • I’m using Visual Studio online for convenience here but you may choose other options of development/deployment processes. cors2
  • I used ng-file-upload for this sample app but there are other great modules to upload images from angular app to remote servers. https://github.com/danialfarid/ng-file-upload
  • Click on Open console option in left of visual studio online and enter below command to install ng-file-upload module npm install ng-file-upload


  • Replace content in hostingstart.html file with below content.

  • Change the values in storage url appropriately

storageurl = “https://<storage_account_name>.blob.core.windows.net/<container_name>/”+file.name+”sas_content”

For More Details on Blob upload API Refer : https://msdn.microsoft.com/en-us/library/azure/dd179451.aspx You can get sas_content using below python script. 

  • Most probably you would end up with below error while uploading the file

XMLHttpRequest cannot load https://prmadisampletest.blob.core.windows.net/samplecontainer/8.jpg?sr=c&s…Nqb6zHI4dfgDJhNtksGYiCu2rFLtk%3D&sv=2015-07-08&se=2016-10-07T16%3A33%3A35Z. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://azure-storage-sample.azurewebsites.net' is therefore not allowed access. The response had HTTP status code 403. cors4

CORS is an HTTP feature that enables a web application running under one domain to access resources in another domain. Web browsers implement a security restriction known as same-origin policy that prevents a web page from calling APIs in a different domain.

More info : https://msdn.microsoft.com/en-us/library/azure/dn535601.aspx

Run Below python script by setting proper details for below ACCOUNT_NAME =”XXXXX” ACCOUNT_KEY =”XXXXX” CONTAINER_NAME=’XXXXX’ You should see images uploading successfully now. AngularJs App UI :


Portal with newly uploaded file in container : cors6  

Troubleshoot : How to run above Python Scripts ?

  Update 12/1/2016  :  Now you can add CORS settings from Azure Storage Explorer https://azure.microsoft.com/pt-br/blog/microsoft-azure-storage-explorer-november-update/