Friday, March 29, 2019

Using Dropzone to upload file to Azure Storage

Hi there!

I am trying to upload a file to azure storage after generating an SAS for an Azure Storage Container. I am using Dropzone.js to do so. I am getting a 403 Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature

It seems as though no authorization header is being sent in my request. I am not sure how to fix that.

My code for the upload looks like this:

<form class="dropzone" id="file-upload" action="@Model.ContainerURI"></form> @section Scripts { <script type="text/javascript"> Dropzone.options.fileUpload = { //autoProcessQueue: false, //To prevent automatic upload before getting SAS paramName: "file", method: 'put', headers: { 'x-ms-meta-*': "", "x-ms-blob-type": "BlockBlob" }, maxFileSize: 50, //what's a good file size limit? clickable: true, uploadMultiple: true, maxFiles: 5, init: function () { let sas = null; xhr = new XMLHttpRequest(); this.on("addedfile", function (file) { console.log('File Added!'); console.log(file); }); this.on("processing", function (file) { this.options.url = this.options.url + "/" + file.name; console.log(this.options.url); }); this.on("sending", function (file, xhr) { var sendFile = xhr.send; xhr.send = function () { sendFile.call(xhr, file); } }); this.on("success", function (response) { console.log(response); }); this.on("error", function (response) { console.log(response); alert(response); }); } }; </script> } 

I am not sure if Dropzone sends the Auth header since I've declared an action in the form element. Any pointers are appreciated!

Thanks!

Using Dropzone to upload file to Azure Storage Click here
  • Blogger Comment
  • Facebook Comment

0 comments:

Post a Comment

The webdev Team