VueJS service for multi-part uploading to MS Azure blob storage.

Downloads in past


0.0.65 years ago5 years agoMinified + gzip package size for vue-azure-blob-upload in KB


Vue Azure Multipart Upload
VueJS service for uploading to azure blob storage.
based on
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'

How to use

Proper config will expose the following method in components


The config object has the following properties

  baseUrl: // baseUrl for blob file uri (i.e. http://<accountName><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)


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

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... ( I took his original code from here and turned it into a re-usable Vue service.