Access Dropzone within callback

[timoth3y]

Thanks again for your great work on this project.

There seems to be no way to access dropzone in the callbacks in which only a File object is passed.

For example, if I want to clear the Dropzone display of all existing files in an onSuccess method, there is no way to do it -- at least that I can find.

Keep up the great work!

[mrukas]

I also had the same problem like you. I found a solution that may not be beautiful, but it works.
I'm using the dropzone in another component like this: {{drop-zone url='http://localhost/test' addedfile=(action "addedFile") id="fileUpload" addRemoveLinks=true autoProcessQueue=false}}.

My component looks like this:

export default Ember.Component.extend({
  dropzone: null,

  didInsertElement() {
    this._super(...arguments);
    this.set('dropzone', Dropzone.forElement('#fileUpload'));
  },
  actions: {
    uploadFile(){
      this.get('dropzone').processQueue();
    },
    addedFile(){
      console.log(`You now have ${this.get('dropzone').files.length} Files in your Dropzone`);
    }
  }
});

So to sum it up, i set an id to the dropzone element and wait until my parent component got inserted into the DOM. Now you can access the instance of the dropzone with this.get('dropzone') and execute every method on it.

P.S.: JSHint may complain about Dropzone not being available but it is global. So you can set it as predef in .jshintrc like this:
"predef": [ "document", "window", "-Promise", "Dropzone" ]

[timoth3y]

@mrukas Nice. I will give that a try. Thanks for the advice.

[timoth3y]

@mrukas Wanted to let you know your solution worked perfectly. You're a lifesaver. Thanks for taking the time to post the workaround.

[KamiKillertO]

Hello,

I tried your solution @mrukas but I have an issue. DropZone is not happy he tell me :
Uncaught Error: No Dropzone found for given element. This is probably because you're trying to access it before Dropzone had the time to initialize. Use theinitoption to setup any additional observers on your Dropzone.

[mrukas]

Hey!

Is it possible that you forgot to give the component an id? In my example the id was "fileUpload" but you can choose whatever you want.

This is the way you use the component.
{{drop-zone url='http://localhost/test' addedfile=(action "addedFile") id="thisIsYourId" addRemoveLinks=true autoProcessQueue=false}}

And in the other component where you used the dropzoine you have to change the line in the didInsertElement method like this:
this.set('dropzone', Dropzone.forElement('#thisIsYourId'));

[KamiKillertO]

Indeed ^^.
A stupid mistacke instead of "myId" (with an i) I wrote "myld" (with an L) ><.
It's working now, thank you

[jevanlingen]

There is a much easier way to achieve this:

Template

{{drop-zone url='{your-url}' success=onDropzoneSuccess}}

Controller

import Ember from 'ember';

export default Ember.Controller.extend({
   onDropzoneSuccess(file) {
       this.removeAllFiles(); //the `this` keyword points to the dropzone object!
       // or this.removeFile(file);
   }
});

NB.
Of course you could use a component instead of a controller.

[FutoRicky]

That is the correct way of doing it.