Dropzone: cannot trigger 'removedFile' event

[anklos]

in my js file, I have set up something like this:

$(document).ready(function(){

  Dropzone.autoDiscover = false;

  var dropzone = new Dropzone (".dropzone", {
    maxFilesize: 256, // Set the maximum file size to 256 MB
    paramName: "document[attachment]", // Rails expects the file upload to be something like model[field_name]
    addRemoveLinks: true // Don't show remove links on dropzone itself.
  });

  dropzone.on("removedFile", function(file){
    alert('remove triggered');
  });

  dropzone.on("addedFile", function(file){
    alert('add triggered');
  });

  dropzone.on("success", function(file){
    alert('success triggered');
  });
});

I could get he success event, however I cannot get removedFile event when I delete the file from drop zone. addedFile event cannnot be triggered as well even the file has been uploaded successfully to my server.

Is there anything I miss here? Thanks in advance.

[wxb]

hi! You write "removedFile" and "addedFile" is error, they should is "removedfile" and "addedfile",
but you can only see event "success" and "addedfile" , not see "removedfile" , you can set autoProcessQueue: false
follow is my test demo

Dropzone.autoDiscover = false;

      var dropzone = new Dropzone ("#mydropzone", {
        maxFilesize: 256, // Set the maximum file size to 256 MB
        paramName: "document[attachment]", // Rails expects the file upload to be something like model[field_name]
        autoProcessQueue: false,
        addRemoveLinks: true // Don't show remove links on dropzone itself.
      });

      dropzone.on("removedfile", function(file){
        alert('remove triggered');
      });

      dropzone.on("addedfile", function(file){
        alert('add triggered');
      });

      dropzone.on("success", function(file){
        alert('success triggered');
      });

I delete $(document).ready(function(){ ...});，because it isn't necessary

[anklos]

@wxb thanks a lot, it works!

Sorry to bring up another question: after uploading using dropzone, I saved the file into the database. when the removedfile event triggered, I also want to delete it from the database. How I can get the saved file id from the file param, so I can make an AJAX call to server to delete the db record?

[wxb]

@anklos
event:success:The file has been uploaded successfully. Gets the server response as second argument. (This event was called finished previously)

 dropzone.on("success", function(file, id){
        var file_serve_id = id;
      });

get file id from server response when a file upload successful

[anklos]

thanks so much!

[anklos]

@wxb Just realize that from your test code, I can get addedfile event, but not success event.

Tried to get the id from the addedfile event, but it was undefined. (dropzone.on("addedfile", function(file, id))

[wxb]

@anklos
The addedfile event have only a argument: file, but success event can set the server response as second argument. so if your code is dropzone.on("addedfile", function(file, id). it's error, because it has one argument:file

[anklos]

@wxb yep. The reason I tried that is because I cannot get success event after file upload, so I cannot the the id.

[wxb]

@anklos
Your server code should return the id,
example: php
you should write

// get $id from database
 echo $id ;

If you don't mind, I'd like to see your code

[wxb]

@anklos
sorry, I got it wrong, because my English is poor
Do you mean to say: success event code not execute when file upload?

[anklos]

@wxb no worries. yes.

success event was not triggered after file uploaded successfully.

[wxb]

@anklos
I have to see all of your code, Otherwise, I don't know why success event was not triggered

[anklos]

@wxb I just copied your demo code. removedfile and addedfile events could be triggered, except success event. quite strange.

[anklos]

@wxb can you see the success event by running your demo code?

[wxb]

@anklos
It's my fault, I update my demo, you can see success event, I am just modifying an attribute:
autoProcessQueue: false, -> autoProcessQueue: true,. if you don't know what it is? you can study https://github.com/enyo/dropzone/wiki/Upload-all-files-with-a-button
in this case,you can click button to upload, so you will see the success event ; but I forgot to set the button in my demo. so you do not see this success event.

[anklos]

@wxb yep that works! Thanks so much!!