How to change url dropzone? URL dynamically with ajax success

Question

I read this: https://github.com/enyo/dropzone/wiki/Set-URL-dynamically but i dont got success... :( I have 1 form...

And i send the inputs with ajax.

The aj

Answer 1

Another way that worked for me (accept event callback):

$('div#dropzone').dropzone({
    options...,
    accept: function (file, done) {
        this.options.url = 'the url you want';
    }
});

Answer 2

change this

this.options.url = "class/upload_img.php?"+json.id;

to this

myDropzone.options.url = "class/upload_img.php?"+json.id;

Does that work?

Answer 3

If you need to change the URL dropzone posts to dynamically for each file, you can use the processingfile event and change the options.url.

<form id="my-dropzone" action="/some-url" class="dropzone"></form>
<script>
Dropzone.options.myDropzone = {
  init: function() {
    this.on("processing", function(file) {
      this.options.url = "/some-other-url";
    });
  }
};
</script>

Answer 4

New answer for an old question only because I found this answer and the link to the dropzone wiki and didn't like it. Modifying the options of the plugin multiple times like that seems very wrong.

When dropzone uses some options it runs it through a resolveOption function passing in a files array. In the current branch you can define a function for the options: method, url and timeout.

Here's a complete working example including delaying for the ajax:

Dropzone.autoDiscover = false;

const doStuffAsync = (file, done) => {
  fetch('https://httpbin.org/get').then((response) => {
    file.dynamicUploadUrl = `https://This-URL-will-be-different-for-every-file${Math.random()}`
    done();//call the dropzone done
  })  
}

const getMeSomeUrl = (files) => {
  return `${files[0].dynamicUploadUrl}?sugar&spice`;
}

let myDropzone = new Dropzone("#my-awesome-dropzone", {
  method: "put",
  accept: doStuffAsync,
  url: getMeSomeUrl
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">

<form action="/file-upload" class="dropzone" id="my-awesome-dropzone">
</form>

Answer 5

You may add a function on dropzone's "processing" event listener.

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

Here is the link where I got the code and it works for me: https://github.com/enyo/dropzone/wiki/Set-URL-dynamically