Microsoft Azure Open Source Development Support Team Blog

Support for Open Source Technologies on Microsoft Azure App Service

Uploading Images to Azure Storage from AngularJS App

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 :

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


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)
  • I’m using Visual Studio online for convenience here but you may choose other options of development/deployment processes.
  • I used ng-file-upload for this sample app but there are other great modules to upload images from angular app to remote servers.
  • 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><container_name>/“sas_content

For More Details on Blob upload API Refer :

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…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 '' 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 :

Run Below python script by setting proper details for below


You should see images uploading successfully now.

AngularJs App UI :


Portal with newly uploaded file in container :



Troubleshoot :

How to run above Python Scripts ?


Update 12/1/2016  :  Now you can add CORS settings from Azure Storage Explorer