Integrating Dropzone.js with angular

Question

I am working from some code that integrated DropboxJS as an angular directive. I cannot get it to work. I've taken his fiddle and updated it with current CDN links. Any idea why the directive code never fires? For ex if I drop an image it will go to /upload instead of /desiredupload and the event doesn't fire.

Fiddle: http://jsfiddle.net/cyberwombat/3tDqZ//1/

angular.module('dropZone', [])
.directive('dropZone', function() {
  return function(scope, element, attrs) {
    element.dropzone({ 
        url: "/desiredupload",
        maxFilesize: 100,
        paramName: "uploadfile",
        maxThumbnailFilesize: 5,
        init: function() {
          this.on("addedfile", function(file) { 
           alert("Added file."); });
       }
    });
  }
});

angular.module('dropZone', [])
.controller('dropZoneCtrl', function() {});

Additionally and unfortunately I cannot replicate in my fiddle - on my local code I get this error: Object [object Object] has no method 'dropzone'

I am loading dropzone, then angular (tried the the other way) then my app, directives, etc.. so I don't think order is an issue. Dropzone successfully detects the form and makes it DnD but my directive element doesn't seem to have dropz

I got lost reading this. Is your question obsolete or something else? I'm also not sure what "see more: changes to syntax highlighting" or "this is now implemented" means. In short, just what are you asking here? — ChrisLively
– ChrisLively, Commented Aug 11, 2013 at 23:57
Oh Jeez.. I had try to paste some syntax hightlite directive for my code and accidentily pasted junk! Whoops... Should make more sense now — cyberwombat
– cyberwombat, Commented Aug 12, 2013 at 1:04

KVISH · Accepted Answer · 2015-08-11 01:09:52Z

This is how I do it:

.directive('dropZone', function () {
    return {
        scope: {
            action: "@",
            autoProcess: "=?",
            callBack: "&?",
            dataMax: "=?",
            mimetypes: "=?",
            message: "@?",
        },
        link: function (scope, element, attrs) {
            console.log("Creating dropzone");

            // Autoprocess the form
            if (scope.autoProcess != null && scope.autoProcess == "false") {
                scope.autoProcess = false;
            } else {
                scope.autoProcess = true;
            }

            // Max file size
            if (scope.dataMax == null) {
                scope.dataMax = Dropzone.prototype.defaultOptions.maxFilesize;
            } else {
                scope.dataMax = parseInt(scope.dataMax);
            }

            // Message for the uploading
            if (scope.message == null) {
                scope.message = Dropzone.prototype.defaultOptions.dictDefaultMessage;
            }

            element.dropzone({
                url: scope.action,
                maxFilesize: scope.dataMax,
                paramName: "file",
                acceptedFiles: scope.mimetypes,
                maxThumbnailFilesize: scope.dataMax,
                dictDefaultMessage: scope.message,
                autoProcessQueue: scope.autoProcess,
                success: function (file, response) {
                    if (scope.callBack != null) {
                        scope.callBack({response: response});
                    }
                }
            });
        }
    }
})

An example usage of this would be:

<div action="/file/upload/" class="dropzone" drop-zone
     call-back="myCallBackMethod(response)"
     data-max="5"
     auto-process="false"
     message="Drop file here or click to select"
     mimetypes=".doc,.docx,.pages,.pdf,.odt"
     id="file-dropzone">
</div>

Any scope variable that has a ? next to it is optional. The only required field is action, which would be the URL to send post to.

Zorji · Accepted Answer · 2013-09-25 17:53:59Z

-1

$(element).dropzone({ 
    url: "/desiredupload",
    maxFilesize: 100,
    paramName: "uploadfile",
    maxThumbnailFilesize: 5,
    init: function() {
      this.on("addedfile", function(file) { 
       alert("Added file."); });
   }
});

Wrap element with $(...). In AngularJS it says all DOM elements are JQuery object but I think you might be using a older version of AngularJS.

answered Sep 25, 2013 at 17:53

Zorji

1,08210 silver badges18 bronze badges

Collectives™ on Stack Overflow

Integrating Dropzone.js with angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related