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");
});
}
});