Multiple ng-dropzones in one page

Question

I'm using ng-dropzone for manage my images files uploads. It works well in single ng-dropzone in a single page, but when comes to multiple dropzones in a single page, only the last dropzone will works. The other dropzone won't work. Currently, I'm getting image URL from the backend and parse into dropzone as the default thumbnail image.

HTML

// Doesn't show the thumbnail image
<ng-dropzone ng-show="random", options="dzOptionInit" callbacks="dzCallbacks" methods="dzMethods" class="dropzone"></ng-dropzone>

// Show thumbnail image
<ng-dropzone ng-show="random2", options="dzOptionInit" callbacks="dzCallbacks" methods="dzMethods" class="dropzone"></ng-dropzone>

Controller

$scope.dzMethods = {};
$scope.dzOptionInit = {
  url: '#',
  paramName : 'photo',
  maxFilesize : '25',
  acceptedFiles : 'image/jpeg, images/jpg, image/png',
  addRemoveLinks : true,
  autoProcessQueue : false,
  maxFiles: 1
};

$scope.dzCallbacks = {
  'addedfile' : function(file){
     $scope.newFile = file;
     ..
  },
  'success': function(){
     ..
   }, 
  'removedfile': function(){
     ..
   },
};

Service.GetData(function(data){
    $scope.calculators.featured_photo = data.featured_photo;
    $scope.myDz = $scope.dzMethods.getDropzone();
    var mockFile = {serverImgUrl : $scope.calculators.featured_photo};
    $scope.myDz.emit("addedfile", mockFile);
    $scope.myDz.emit("success", mockFile);
    $scope.myDz.emit("thumbnail", mockFile, 
    $scope.calculators.featured_photo);
    $scope.myDz.createThumbnailFromUrl(mockFile, mockFile.serverImgUrl, null, true);
    $scope.myDz.files.push(mockFile);
});

I had tried to look at the similar stackoverflow question in a non-angular way. But still have no idea.

score -1 · Answer 1 · answered Jul 03 '17 at 09:02

I use custom directive. Try it.

<div class="drop" ng-dropzone="addImage($event)">
        Drop images here
</div>


// ./js/directives.js
angular
    .module('myGenerator') // myGenerator replace to your name module!!
    .directive('ngDropzone', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            compile: function ($element, attr) {
                var fn = $parse(attr['ngDropzone']);
                return function (scope, element) {
                    element.on('dragover', function (e) {
                        e.stopPropagation();
                        e.preventDefault();
                        e.dataTransfer.dropEffect = 'copy';
                    });
                    element.on('drop', function (e) {
                        var callback = function () {
                            fn(scope, {$event: e});
                        };
                        e.stopPropagation();
                        e.preventDefault();
                        scope.$apply(callback);
                    });
                }
            }
        }
    }]);

// ./js/controller.js
angular
    .module('myGenerator')// myGenerator replace to your name module!!
    .controller('DropCtrl', ['$scope',  function ($scope) { // replace name controlller
            // Load all images
            $scope.addImage = function (e) {
            // create array with files
                var files = Array.prototype.slice.call(e.dataTransfer.files);
                files.forEach(function(file){
                    alert("Added File " + file.name);
                });

            };
        }])

You can see it https://codepen.io/max-ivaneychyk/pen/JJvPmY?editors=1111

Multiple ng-dropzones in one page

1 Answers1