How to change URL drop zone? URL dynamically with ajax success

Question

I read this: https://github.com/enyo/dropzone/wiki/Set-URL-dynamically , but I did not get success ... :( I have 1 form ...

And I am sending inputs using ajax.

ajax returns the new user id. at this point I want to change the dropzone for the url to set the path to the new user id.

$.ajax({ type: "POST", url: "class/inserir.php?funcao=teste", data: formdata, dataType: "json", success: function(json){ if(json.sucesso=="sim"){ alert("Wait! Sending Pictures."); this.options.url = "class/upload_img.php?"+json.id; myDropzone.processQueue(); }else{ location.href="home.php?ir=cad_animal&cad=nao&erro="+json.erro; } } }); var myDropzone = new Dropzone("#imagens", { url: "class/upload_imgteste.php", paramName: "file", // The name that will be used to transfer the file maxFilesize: 1, // MB addRemoveLinks : true, dictResponseError: "Não foi possível enviar o arquivo!", autoProcessQueue: false, thumbnailWidth: 138, thumbnailHeight: 120, }); 

Sorry for my bad english!

Thanks to everyone.

Answer 1

You can add a function to the dropzone "handle" 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

Answer 2

change this value

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

to that

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

It works?

Answer 3

The new answer for the old question is only because I found this answer and the link to the dropzone wiki and didn’t like it. Changing the plugin parameters several times seems to be very wrong.

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

Here's a complete working example including a delay for 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 4

If you need to dynamically change Dropzone URL messages for each file, you can use the processfile event and modify 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 5

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

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