Dfyjkt

I'm trying to use dropzone to upload large files directly to Azure storage using a SAS(Shared Access Signature). This is documented on the Azure side here: https://docs.microsoft.com/en-us/rest/api/storageservices/Put-Block

So I have to get the blockId(A Base64 string that identifies the chunk I'm sending) and put it in the url of the request sending that chunk.

Dropzone supports chunking now so I decided to use that. Unfortunately, implementations of it are hard to find.

I can change the url in the processing event but that's per file and I can't get chunk data from it.

I can send the blockId in the form data using params but can't seem to change the url from it.

Is it possible to add the blockId to my url? Or will I have to send it to my server first and upload from there? Thanks.

$("#videoSection").dropzone(
 params: function (files, xhr, chunk) 
 console.log(chunk);

 xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');

 //I can get the blockId from the chunk here

 //this.options.url.replace("test") //doesn't work
 //xhr.open(this.options.method, this.options.url.replace("test"), true); //doesn't work

 return "url": "test"; //this returns form-data
 ,
 url: "Create",
 method: "PUT",
 //headers: "x-ms-blob-type": "BlockBlob" ,
 chunking: true,
 chunkSize: 4000000,
 forceChunking: true,
 retryChunks: true,
 retryChunksLimit: 3,
 autoProcessQueue: false,
 acceptedFiles: "video/*",
 maxFiles: 1,
 maxFilesize: 3000,
 previewTemplate: $("#videoTemplate").html(),
 dictDefaultMessage: "Drop Video Here",
 init: function () 
 this.on("processing", function (file) 
 var blockId = 1;

 @*this.options.url = "@(Config.Value.StoragePrefix)/@(user.Company.StorageName)/inspections/@Model.InspectionData.Inspection.Id/videos/"
 + file.name + "@Html.Raw(Model.SharedAccessSignature + "&comp=block&blockid=")" + blockId;*@


 var progressBar = $(file.previewElement).find(".dropzoneProgressBar");
 progressBar.show();
 );
 this.on("chunksUploaded", function (file, done) 
 $.ajax(
 type: "PUT",
 url: "@(Config.Value.StoragePrefix)/@(user.Company.StorageName)/inspections/@Model.InspectionData.Inspection.Id/videos/"
 + file.name + "@Html.Raw(Model.SharedAccessSignature + "&comp=blocklist")",
 success: function (data) 
 done();
 ,
 error: function (e) 
 toastr.error(e);
 console.log(e);
 
 );
 );
 this.on("uploadprogress", function (file, progress, bytesSent) 
 var progressBar = $(file.previewElement).find(".dropzoneProgressBar");
 progress = bytesSent / file.size * 100;
 progressBar.width(progress + "%");
 );
 this.on("success", function (file, response) 
 var successCheckmark = $(file.previewElement).find(".dropSuccess");
 successCheckmark.toggle();
 var progressBar = $(file.previewElement).find(".dropzoneProgressBar");
 progressBar.css("background-color", "green");
 );
 
 );

There is a problem with this line this.options.url.replace("test") //doesn't work. It should be this.options.url = this.options.url.replace("test", "newValue") //this should work. I am using a similar approach. The issue is that the params callback is called once XmlHttpRequest has been opened so you need to set the url for the first chunk before you start processing the file and in the params you need to set the url for the next chunk to be sent (use chunk.index + 1 for zero based indexing). I am not sure if this would work if you had parallelChunkUploads enabled - I haven't tested if the first chunk to be processed is the first one. Let me know if you need more information.