javascript - Integrating Dropzone.js with angular - Stack Overflow

admin管理员组

文章数量:1430093

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: //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 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/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

• javascript
• angularjs

Share Improve this question Follow edited Aug 12, 2013 at 1:03 cyberwombat asked Aug 11, 2013 at 23:51 cyberwombatcyberwombat 40.3k4242 gold badges184184 silver badges267267 bronze badges 2

• 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 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 Commented Aug 12, 2013 at 1:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

$(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.

本文标签： javascriptIntegrating Dropzonejs with angularStack Overflow