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 ajax returns the new id of user. in this moment i want to change de url dropzone for to set path to id of the new user.

$.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 for all.

score 34 · Answer 1 · answered Dec 27 '15 at 11:10

34

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

answered Dec 27 '15 at 11:10

jroi_web

1,992
22
23

2

Best answer here – KitKit Mar 13 '19 at 10:36
Right answer. Thanks. – Augus Dec 27 '20 at 11:38

score 7 · Answer 2 · answered Jul 23 '15 at 07:31

7

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?

answered Jul 23 '15 at 07:31

Torqie

143
1
8

score 6 · Answer 3 · answered Apr 18 '18 at 13:28

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>

score 1 · Answer 4 · answered Oct 04 '16 at 05:04

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>

score 0 · Answer 5 · answered Oct 08 '19 at 13:54

0

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

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

answered Oct 08 '19 at 13:54

Frank

79
1
2

score 0 · Answer 6 · answered Apr 07 '22 at 15:21

BlueWater86's answer didn't work for me. But I agree that changing myDropzone.options.url each time is bad practice, and it actually doesn't work if you are dragging a lot of files into the uploader at the same time.

I wrote the following code and it works well for uploading one file at time and for many at a time. I'm using Backblaze B2 but it should also work for S3.

myDropzone.on('addedfile', function(file) {
  options = {
    filename: file.name,
    type: file.type,
    _: Date.now()
  };

  // Make the request for the presigned Backblaze B2 information, then attach it
  $.ajax({
    url: '/presign_b2',
    data: options,
    type: 'GET',
    success: function(response){
      file.dynamicUrl = response['url'];
      myDropzone.enqueueFile(file);
    }
  });  
});

myDropzone.on('sending', function(file, xhr) {
  xhr.open("PUT", file.dynamicUrl); // update the URL of the request here
  var _send = xhr.send;
  xhr.send = function() {
    _send.call(xhr, file);
  }
});

How to change url dropzone? URL dynamically with ajax success

6 Answers6

Linked