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

cors7

  • Create a container and provide required access level

cors8

  • 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

cors3

  • 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 'https://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 :

cors5

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/