Skip to content

Instantly share code, notes, and snippets.

@alexpchin
Forked from compact/dropzone-directive.js
Created February 13, 2016 23:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexpchin/efc33fe072d8eafd7039 to your computer and use it in GitHub Desktop.
Save alexpchin/efc33fe072d8eafd7039 to your computer and use it in GitHub Desktop.
AngularJS directive for Dropzone.js
/**
* An AngularJS directive for Dropzone.js, http://www.dropzonejs.com/
*
* Usage:
*
* <div ng-app="app" ng-controller="SomeCtrl">
* <button dropzone="dropzoneConfig">
* Drag and drop files here or click to upload
* </button>
* </div>
*/
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
angular.forEach(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) {
}
}
};
});
@ahmednawazbutt
Copy link

I am getting Error
Cannot read property 'options' of undefined
The line I am pointed to is
dropzone = new Dropzone(element[0], config.options);

my Directive is:

'use strict';

angular.module('myModuleName').directive('ngDropzone', function () {
	return {
        restrict: 'A',
        link: 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
        	angular.forEach(config.eventHandlers, function (handler, event) {
        		dropzone.on(event, handler);
        	});
        }
	};
});

my HTML is:

<button data-ng-dropzone="dropzoneConfig">
	Drag and drop files here or click to upload
</button>

my Controller is:

	
	$scope.dropzoneConfig = {
		    'options': { // passed into the Dropzone constructor
//		    	'url': 'upload.php'
		    	'url': null,
		    	'maxFiles': 1,
		    	'autoProcessQueue': false,
		    },
		    'eventHandlers': {
		      'sending': function (file, formData, xhr) {
		    	  console.log(file);
		    	  console.log(formData);
		    	  console.log(xhr);
		      },
		      'success': function (file, response) {
		    	  console.log(file);
		    	  console.log(response);
		      }
		    }
		  };

What am I missing???

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment