vue-azure-blob-upload

Vue Azure Multipart Upload

VueJS service for uploading to azure blob storage.

based on https://github.com/kinstephen/angular-azure-blob-upload

Provides for the ability to upload an HTML5 File to Azure's Blob Storage. The file is uploaded in chunks to avoid memory issues as a BlockBlob. The upload uses a Shared Access Signature (SAS) to secure the file upload.

Required dependencies

• VueJS
• one of HTTP clients:
  • Axios
  • Vue Axios
  • Vue Resource

Installation

npm i --save vue-azure-blob-upload

After instaling by npm (above) to your VueJS project

import VueAzureUploader to your main Vue file like so

import VueAzureUploader from 'vue-azure-blob-upload'
Vue.use(VueAzureUploader);

How to use

Proper config will expose the following method in components

this.$azureUpload.upload(config)

The config object has the following properties

{
  baseUrl: // baseUrl for blob file uri (i.e. http://<accountName>.blob.core.windows.net/<container>/<blobname>),
  sasToken: // Shared access signature querystring key/value prefixed with ?,
  file: // File object using the HTML5 File API,
  progress: // progress callback function,
  complete: // complete callback function,
  error: // error callback function,
  blockSize: // Use this to override the DefaultBlockSize,
}

How to use with custom http instance

VueAzureUploader is using Vue.$http object by default. You can provide custom instance of Axios or other promise-based http client.

import Axios from 'axios'
 
const httpConfig = {
  headers: {
    authorizaion: 'Bearer token123'
  }
}
 
const axios = Axios.create(httpConfig)
 
this.$azureUpload.upload(config, axios)
 

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

Special Thanks

Thanks to Stephen Brannan and his original work using AngularJS. Most of it coming from original Angular JS version https://github.com/kinstephen/angular-azure-blob-upload

Original thanks (from Angular version):

Extreme thanks goes to Gaurav Mantri and his original work using plain JavaScript. Much of it comes from the blob post... (http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript). I took his original code from here and turned it into a re-usable Vue service.