Dropzone and Ember... and I guess it applies to general JS libraries

1

I have successfully been able to integrate Dropzone into my Ember site however once I went to having multiple dropzones on a single page I ran into another problem. Basically my problem is that I need unique Ids on my dropzones which i do via:

However when I run the Dropzone code the id attribute has not been bound yet, any suggestions on where to run my code? (code below)

App.ImageUploadComponent = Ember.Component.extend({ layoutName: ‘components/image-upload’,

didInsertElement: function() {
    console.log('ImageUploadComponent.didInsertElement');

    Ember.run.scheduleOnce('afterRender', this, function() {
        // perform jQuery function here;
        console.log('ImageUploadComponent.didInsertElement.afterRender');

        var dropZoneSelector = "div#" + this.get('graphic._clientId');
        var emberComponent = this;
        var myDropzone2 = $(dropZoneSelector); // this is nothing
        var myDropzone3 = document.querySelector(dropZoneSelector); // as is this
        
        var myDropzone = new Dropzone(dropZoneSelector, {
            url: "http://localhost:3000/graphics/upload"
        });
2

Looking at the Dropzone code it looks like the constructor can take an element. Try passing in the view’s element like so:

var myDropzone = new Dropzone(this.get('element'), { url: '...'});