title: Getting error Dropzone already attached with angular Directives
body: <p>I am using following code for drop zone but i am getting error, i tried to debug it but i am not able to resolve this action plz guide</p>
  
  <p><strong><a href="http://jsfiddle.net/anam123/rL6Bh/" rel="noreferrer">http://jsfiddle.net/anam123/rL6Bh/</a></strong></p>
  
  <pre><code> -------------------&gt; "Error: Dropzone already attached.
  
    throw new Error("Dropzone already attached.");" 
  </code></pre>
  
  <p>Code::</p>
  
  <p><a href="https://gist.github.com/compact/8118670" rel="noreferrer">https://gist.github.com/compact/8118670</a>   </p>
  
  <p>snippts:</p>
  
  <pre><code> /**
   * An AngularJS directive for Dropzone.js, http://www.dropzonejs.com/
   * 
   * Usage:
   * 
   * &lt;div ng-app="app" ng-controller="SomeCtrl"&gt;
   *   &lt;button dropzone="dropzoneConfig"&gt;
   *     Drag and drop files here or click to upload
   *   &lt;/button&gt;
   * &lt;/div&gt;
   */
  
  angular.module('dropzone', []).directive('dropzone', function () {
    return function (scope, element, attrs) {
      var config, dropzone;
  
      config = scope[attrs.dropzone];
  
      // create a Dropzone for the element with the given options
      dropzone = new Dropzone(element[0], config.options);
  
      // bind the given event handlers
      _.each(config.eventHandlers, function (handler, event) {
        dropzone.on(event, handler);
      });
    };
  });
  
  angular.module('app', ['dropzone']);
  
  angular.module('app').controller('SomeCtrl', function ($scope) {
    $scope.dropzoneConfig = {
      'options': { // passed into the Dropzone constructor
        'url': 'upload.php'
      },
      'eventHandlers': {
        'sending': function (file, xhr, formData) {
        },
        'success': function (file, response) {
        }
      }
    };
  });
  </code></pre>