Upload the file directly to Azure Blob storage (using SAS) using dropzone.js

Question

I would like to use dropzone.js to upload files directly to Azure Blob Storage using SAS ( example here ) to keep files private.

As I understand it, the workflow will be as follows:

• User selects file
• The dropzone event processingfires. In the event handler, I call a method on my site API that creates the Azure Blob URI to load, including the SAS request string
• Dropzone download url set to "secure" blob url
• Download begins

I found the following wiki article that shows how to dynamically set the Dropzone URL ( https://github.com/enyo/dropzone/wiki/Set-URL-dynamically )

Dropzone.options.myDropzone = {
  init: function() {
    this.on("processing", function(file) {
      // I need to do an async call here, to get the URL...
      this.options.url = "/some-other-url";
    });
  }
};

The problem is that the above example is synchronous. How can I postpone the download until the URL is requested from my website api asynchronously ?

thank

Answer 1

You can try synchronous ajax call with jQuery.

function GetUrl() {
    var url = "";
    $.ajax({
        async: false,
        success: function(data) {
            url = data;
        }
        // Other opts   
    });
    return url;
}

Dropzone.options.myDropzone = {
  init: function() {
    this.on("processing", function(file) {
      this.options.url = GetUrl();
    });
  }
};

Answer 2

Maybe I'm a little late with the answer

Use predefined SAS

form data-sas . , - SAS , havent . ( )

Dropzone.options.myDropzone = {
  method: "PUT",
  headers: {"x-ms-blob-type": "BlockBlob"},
  sending: (file, xhr) => {
    // To send file without wrappintng it to multipart/form-data,
    // Azure won’t unwrap it
    const _send = xhr.send;
    xhr.send = () => { _send.call(xhr, file) };
  },
  init: function() {
    const dz = this,
          action = dz.element.action,
          sas = dz.element.dataset.sas;

    dz.on("processing", (file) => {
      dz.options.headers["Content-Type"] = file.type;
      dz.options.url = `${action}/${file.name}?${sas}`;
    })
  },
}

Dropzones init

Dropzone.options.myDropzone = {
  autoProcessQueue: false, // To prevent automatic auploading before getting SAS
  acceptedFiles: ".xls,.xlsx",
  method: "PUT",
  headers: {"x-ms-blob-type": "BlockBlob"},
  sending: (file, xhr) => {
    // To send file without wrappintng it to multipart/form-data,
    // Azure won’t unwrap it
    const _send = xhr.send;
    xhr.send = () => { _send.call(xhr, file) };
  },
  init: function() {
    let sas = null;
    const dz = this,
          xhr = new XMLHttpRequest();

    xhr.addEventListener("load",
        (event) => {
          sas = getSasFromEvent(event);
          dz.options.autoProcessQueue = true;
          dz.processQueue();
        }, true);
    xhr.open("GET", "/get-sas");
    xhr.send();

    dz.on("processing", (file) => {
      dz.options.headers["Content-Type"] = file.type;
      dz.options.url = `${action}/${file.name}?${sas}`;
    })
  },
}

Dropzone , SAS asynchrouniosly

.