title: Angularjs Multiple Dropzone for Image Upload on a Single Page
body: <p>I am using dropzone.js for multiple image upload.And when there is only one dropzone on a single page, it works fine. But if I try to use more than one dropzone on a single page, only one dropzone is working i.e. the second one while first one remains idle. I tried to search for answers but they are only related to javascript and doesn't work for <strong>Angularjs</strong>.
  Below are the codes I am attaching for reference.</p>
  
  <p><strong>HTML</strong> <br>
  <strong>1st Dropzone</strong></p>
  
  <pre><code>&lt;div id="dropzone2" name="form_16" data-ng-model="itr.form_16" class="dropzone sm"
                                   options="form16Options" methods="form16Methods"
                                   callbacks="form16Callbacks" dz-form16&gt;&lt;/div&gt;
                              &lt;br&gt;
                              &lt;div style="text-align:center;" id="startUpload" ng-show="showBtns"&gt;
                                  &lt;button class="btn btn-default" ng-click="form16Methods.processQueue();"&gt;Upload All
                                  &lt;/button&gt;
                                  &lt;button class="btn btn-blue" ng-click="form16Methods.removeAllFiles();"&gt;Remove All
                                  &lt;/button&gt;
                              &lt;/div&gt;
  </code></pre>
  
  <p><strong>2nd Dropzone</strong></p>
  
  <pre><code>&lt;div id="loan_certificate" name="loan_certificate" data-ng-model="itr.loan_certificate"
                                   class="dropzone sm" options="loanOptions" methods="loanMethods"
                                   callbacks="loanCallbacks" dz-loan-certificate&gt;&lt;/div&gt;
                              &lt;br&gt;
  &lt;div style="text-align:center;" ng-show="showBtns"&gt;
  &lt;button class="btn btn-default" ng-click="loanMethods.processQueue();"&gt;Upload All
  &lt;/button&gt;
  &lt;button class="btn btn-blue" ng-click="loanMethods.removeAllFiles();"&gt;Remove All
  </code></pre>
  
  <p>
                                  </p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>angular.extend($scope, {
  
          first: true,
          showBtns: false,
          lastFile: null,
          dzMethods: {},
          dzOptions: {
              url: $API.POST_ITR_IMAGE,
              dictDefaultMessage: '&lt;i class="fa fa-plus"&gt;&lt;/i&gt; Drop image or click to choose image',
              parallelUploads: 4,
              autoProcessQueue: false,
              acceptedFiles: 'image/jpeg, images/jpg, image/png',
              addRemoveLinks: true,
              uploadMultiple: true,
              dictCancelUpload: '',
              maxFilesize: '2',
              // maxFiles: 4,
          },
          dzCallbacks: {
              'addedfile': function (file, xhr, formData) {
                  $scope.showBtns = true;
                  $scope.lastFile = true;
              },
              'sendingmultiple': function (file, xhr, formData) {
                  formData.append("_token", csrfToken);
                  formData.append("id", $scope.itr.id);
                  formData.append("form_16", $scope.itr.form_16);
  
                  console.log(file);
              },
              'successmultiple': function (file, result) {
                  if (result.success) {
                      $scope.pop_gallery = {images: result.image};
                      console.log($scope.pop_gallery);
                  }
              },
              'error': function (file, xhr) {
                  if (file.size &gt; 2 * 1000) {
                      alert(xhr);
                  }
                  console.warn('File failed to upload from dropzone 2.', file, xhr);
              },
              'completemultiple': function (file) {
                  angular.forEach(file, function (value, key) {
                      $scope.dzMethods.removeFile(value);
                  });
              },
              'queuecomplete': function (file) {
                  $scope.showBtns = false;
                  $scope.lastFile = null;
                  //  $scope.dzMethods.removeAllFiles();
              }
          },
  </code></pre>
  
  <p><strong>Directive</strong></p>
  
  <pre><code>.directive('ngDropzone', ['$timeout', 'dropzoneOps', function ($timeout, dropzoneOps) {
      return {
          restrict: 'AE',
          template: '&lt;div&gt;&lt;/div&gt;',
          replace: true,
          scope: {
              options: '=?', //http://www.dropzonejs.com/#configuration-options
              callbacks: '=?', //http://www.dropzonejs.com/#events
              methods: '=?' //http://www.dropzonejs.com/#dropzone-methods
          },
          link: function (scope, iElem, iAttr) {
              //Set options for dropzone {override from dropzone options provider}
              scope.options = scope.options || {};
  
              var initOps = angular.extend({}, dropzoneOps, scope.options);
  
              if (iAttr.hasOwnProperty('name'))
                  angular.extend(initOps, {paramName: iAttr.name});
              //Instantiate dropzone with initOps
              var dropzone = new Dropzone(iElem[0], initOps);
  
  
              /*********************************************/
  
  
              //Instantiate Dropzone methods (Control actions)
              scope.methods = scope.methods || {};
              scope.methods.getDropzone = function () {
                  return dropzone; //Return dropzone instance
              };
  
              scope.methods.getAllFiles = function () {
                  return dropzone.files; //Return all files
              };
  
              var controlMethods = [
                  'removeFile', 'removeAllFiles', 'processQueue',
                  'getAcceptedFiles', 'getRejectedFiles', 'getQueuedFiles', 'getUploadingFiles',
                  'disable', 'enable', 'confirm', 'createThumbnailFromUrl'
              ];
  
              angular.forEach(controlMethods, function (methodName) {
                  scope.methods[methodName] = function () {
                      dropzone[methodName].apply(dropzone, arguments);
                      if (!scope.$$phase &amp;&amp; !scope.$root.$$phase)
                          scope.$apply();
                  }
              });
  
  
              /*********************************************/
  
  
              //Set invents (callbacks)
              if (scope.callbacks) {
                  var callbackMethods = [
                      'drop', 'dragstart', 'dragend',
                      'dragenter', 'dragover', 'dragleave', 'addedfile', 'removedfile',
                      'thumbnail', 'error', 'processing', 'uploadprogress',
                      'sending', 'success', 'complete', 'canceled', 'maxfilesreached',
                      'maxfilesexceeded', 'processingmultiple', 'sendingmultiple', 'successmultiple',
                      'completemultiple', 'canceledmultiple', 'totaluploadprogress', 'reset', 'queuecomplete'
                  ];
                  angular.forEach(callbackMethods, function (method) {
                      var callback = (scope.callbacks[method] || angular.noop);
                      dropzone.on(method, function () {
                          callback.apply(null, arguments);
                          if (!scope.$$phase &amp;&amp; !scope.$root.$$phase)
                              scope.$apply();
                      });
                  });
              }
          }
      }
  }])
  .provider('dropzoneOps', function () {
      /*
       *  Add default options here
       **/
      var defOps = {
          //Add your options here
      };
  
      return {
          setOptions: function (newOps) {
              angular.extend(defOps, newOps);
          },
          $get: function () {
              return defOps;
          }
      }
  })
  </code></pre>