AngularJS module providing a service to upload to azure blob storage in parallel blocks with MD5 hashing
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Change percent calculation logic Feb 24, 2016
config Better retry logic Jan 22, 2016
tests Better retry logic Jan 22, 2016
.bowerrc Initial commit Mar 23, 2015
.gitignore Initial commit Mar 23, 2015
Gruntfile.js Better retry logic Jan 22, 2016
LICENSE License Mar 23, 2015
README.md Useful callback data Dec 17, 2015
bower.json Change percent calculation logic Feb 24, 2016
index.html Useful callback data Dec 17, 2015
package.json Change percent calculation logic Feb 24, 2016

README.md

Angular Azure Blob Upload

AngularJS service for uploading to azure blob storage in HTML5 browsers via FileReader with effective error handling and parallel block uploads.

Library will send MD5 of blocks for integrity by default, and can also optionally MD5 the whole file for usage in your own app once upload completed.

Upload task happens in a separate Web Worker thread.

Prerequisites

  • IE10+
  • Existing Angular app (ofcourse)
  • CryptoJS with MD5 module referenced in your SPA
  • Underscore.js library referenced

How to use

Download the latest release here

or

Build the library on your machine

npm install
bower install
grunt package

There will be a zip file in the dist/ folder for use.

Reference the minified angular module in your SPA HTML:

<script src="/dist/angular-azure-blob.js"></script>

Require the azureBlobStorage module:

angular.module('appx', ['azureBlobStorage']);

Use the service in your controller, make sure the paths are correct!

angular.module('appx').controller('UploadController', [
    '$scope', 'azureBlobUpload',
    function($scope, azureBlobUpload) {
        $scope.upload = function(files) {
            azureBlobUpload.upload({
                path: '/dist/',
                libPath: '/libs/',
                blobUri: xxx,
                file: files,
                process: function cb(file, data) {},
                complete: function cb(file, data) {},
                error: function cb() {},
                blockSize: 1024, // optional
                calculateFileMd5: false // optional, false by default
            });
        };
    }
]);

CORS

Cross Origin Resource Sharing (CORS) must be enabled on the azure blob storage account. The following articles can assist with this...

Windows Azure Storage Introducing CORS

Windows Azure Storage and CORS

Thanks To

Gaurav Mantri for this blog

Stephen Brannan for his original library

UMG