Monday, May 30, 2016

Uploading files directly to Azure using a jquery plugin

Based off of Gaurav Mantri's code "Uploading Large Files in Windows Azure Blob Storage Using Shared Access Signature, HTML, and JavaScript". I have extended his code and wrapped it up in a jquery plugin. It includes a simple UI, support for uploading multiple files and drag and drop. It also allows the exclusion of files based on their extensions.

Example:

   <script>  
     $(document).ready(function () {  
       $('#azureUpload').azureupload({  
         extensions: ".jpg|.jpeg|.png",  
         sasUri: "https://myblob.blob.core.windows.net/uploads?sv=2015-07-08&sr=c&sig=P1x9FUsneKRyM7Mw9ZApNy23XsTYxMePEPgsoGpvUP4%3D&se=2016-05-29T21%3A48%3A43Z&sp=w"  
       });  
     });  
   </script>  
   <body>  
     <div>  
       <div id="azureUpload"></div>  
     </div>  
   </body>  



the code for the js and css files are here:
jquery.azureupload.min.zip

the code for the sample project is here:
UploadExample.zip