Several enhancements

bower.json

@@ -2,7 +2,7 @@
   "author": "Louis Sivillo",
   "name": "angular-file-dnd",
   "description": "AngularJS directive leveraging HTML5 Drag and Drop and the FileReader API",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "main": "dist/angular-file-dnd.min.js",
   "dependencies": {
     "angular": "~1.2.0"

dist/angular-file-dnd.js

@@ -4,20 +4,19 @@
     return {
       require: '^?form',
       restrict: 'A',
-      scope: {
-        file: '=',
-        fileName: '=',
-        dropzoneHoverClass: '@'
-      },
+      scope: false,
       link: function(scope, element, attrs, form) {
-        var checkSize, getDataTransfer, isTypeValid, processDragOverOrEnter, validMimeTypes;
+        var checkSize, getDataTransfer, isTypeValid, processDragOverOrEnter, setScopeVar, validMimeTypes;
         getDataTransfer = function(event) {
           var dataTransfer;
           return dataTransfer = event.dataTransfer || event.originalEvent.dataTransfer;
         };
         processDragOverOrEnter = function(event) {
+          if (!scope.$eval(attrs.dropzoneEnabled)) {
+            return true;
+          }
           if (event) {
-            element.addClass(scope.dropzoneHoverClass);
+            element.addClass(attrs.dropzoneHoverClass);
             if (event.preventDefault) {
               event.preventDefault();
             }
@@ -28,6 +27,7 @@
           getDataTransfer(event).effectAllowed = 'copy';
           return false;
         };
+        attrs.dropzoneHoverClass = attrs.dropzoneHoverClass || 'file-droping';
         validMimeTypes = attrs.fileDropzone;
         checkSize = function(size) {
           var _ref;
@@ -46,31 +46,45 @@
             return false;
           }
         };
+        setScopeVar = function(name, value) {
+          var objName, tmp, varName;
+          if (name.indexOf('.') === -1) {
+            return scope[name] = value;
+          } else {
+            tmp = name.split('.');
+            objName = tmp.slice(0, -1).join('.');
+            varName = tmp[tmp.length - 1];
+            return scope.$eval(objName)[varName] = value;
+          }
+        };
         element.bind('dragover', processDragOverOrEnter);
         element.bind('dragenter', processDragOverOrEnter);
         element.bind('dragleave', function() {
-          return element.removeClass(scope.dropzoneHoverClass);
+          return element.removeClass(attrs.dropzoneHoverClass);
         });
         return element.bind('drop', function(event) {
           var file, name, reader, size, type;
+          if (!scope.$eval(attrs.dropzoneEnabled)) {
+            return true;
+          }
           if (event != null) {
             event.preventDefault();
           }
-          element.removeClass(scope.dropzoneHoverClass);
+          element.removeClass(attrs.dropzoneHoverClass);
           reader = new FileReader();
           reader.onload = function(evt) {
             if (checkSize(size) && isTypeValid(type)) {
               scope.$apply(function() {
-                scope.file = evt.target.result;
-                if (angular.isString(scope.fileName)) {
-                  return scope.fileName = name;
+                setScopeVar(attrs.file, evt.target.result);
+                if (angular.isString(attrs.fileName)) {
+                  return setScopeVar(attrs.fileName, name);
                 }
               });
               if (form) {
                 form.$setDirty();
               }
               return scope.$emit('file-dropzone-drop-event', {
-                file: scope.file,
+                file: scope[attrs.file],
                 type: type,
                 name: name,
                 size: size
@@ -81,7 +95,22 @@
           name = file.name;
           type = file.type;
           size = file.size;
-          reader.readAsDataURL(file);
+          if (!angular.isDefined(attrs.asFile)) {
+            reader.readAsDataURL(file);
+          } else {
+            scope.$apply(function() {
+              setScopeVar(attrs.file, file);
+              if (angular.isString(attrs.fileName)) {
+                return setScopeVar(attrs.fileName, name);
+              }
+            });
+            if (form) {
+              form.$setDirty();
+            }
+            scope.$emit('file-dropzone-drop-event', {
+              file: file
+            });
+          }
           return false;
         });
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-file-dnd",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "dependencies": {},
   "devDependencies": {
     "grunt": "~0.4.1",

src/directive/file_dropzone.coffee

@@ -4,25 +4,25 @@ angular.module('omr.angularFileDnD', [])
   .directive('fileDropzone', () ->
     require: '^?form'
     restrict: 'A'
-    scope: {
-      file: '='
-      fileName: '='
-      dropzoneHoverClass: '@'
-    }
+    scope: false,
     link: (scope, element, attrs, form) ->
 
       getDataTransfer = (event) ->
         dataTransfer = event.dataTransfer || event.originalEvent.dataTransfer
 
       # function to prevent default behavior (browser loading image)
       processDragOverOrEnter = (event) ->
+        if !scope.$eval(attrs.dropzoneEnabled)
+          return true
+
         if event
-          element.addClass scope.dropzoneHoverClass
+          element.addClass attrs.dropzoneHoverClass
           event.preventDefault()  if event.preventDefault
           return false if event.stopPropagation
         getDataTransfer(event).effectAllowed = 'copy'
         false
 
+      attrs.dropzoneHoverClass = attrs.dropzoneHoverClass || 'file-droping';
       validMimeTypes = attrs.fileDropzone
 
       # if the max file size is provided and the size of dropped file is greater than it,
@@ -42,33 +42,54 @@ angular.module('omr.angularFileDnD', [])
           alert "Invalid file type.  File must be one of following types #{validMimeTypes}"
           false
 
+      setScopeVar = (name, value) ->
+        if name.indexOf('.') == -1
+          scope[name] = value
+        else
+          tmp = name.split('.')
+          objName = tmp.slice(0, -1).join('.')
+          varName = tmp[tmp.length - 1]
+          scope.$eval(objName)[varName] = value
+
       # for dragover and dragenter (IE) we stop the browser from handling the
       # event and specify copy as the allowable effect
       element.bind 'dragover', processDragOverOrEnter
       element.bind 'dragenter', processDragOverOrEnter
       element.bind 'dragleave', ->
-        element.removeClass scope.dropzoneHoverClass
+        element.removeClass attrs.dropzoneHoverClass
 
       # on drop events we stop browser and read the dropped file via the FileReader
       # the resulting droped file is bound to the image property of the scope of this directive
       element.bind 'drop', (event) ->
+        if !scope.$eval(attrs.dropzoneEnabled)
+          return true
+
         event?.preventDefault()
-        element.removeClass scope.dropzoneHoverClass
+        element.removeClass attrs.dropzoneHoverClass
         reader = new FileReader()
         reader.onload = (evt) ->
 
           if checkSize(size) and isTypeValid(type)
             scope.$apply ->
-              scope.file = evt.target.result
-              scope.fileName = name if angular.isString scope.fileName
+              setScopeVar(attrs.file, evt.target.result)
+              setScopeVar(attrs.fileName, name) if angular.isString attrs.fileName
             if form
               form.$setDirty() #notify the form of this change
-            scope.$emit 'file-dropzone-drop-event', {file: scope.file, type: type, name: name, size: size}
+            scope.$emit 'file-dropzone-drop-event', {file: scope[attrs.file], type: type, name: name, size: size}
 
         file = getDataTransfer(event).files[0]
         name = file.name
         type = file.type
         size = file.size
-        reader.readAsDataURL file
+        if !angular.isDefined(attrs.asFile)
+          reader.readAsDataURL file
+        else
+          scope.$apply ->
+            setScopeVar(attrs.file, file)
+            setScopeVar(attrs.fileName, name) if angular.isString attrs.fileName
+          if form
+              form.$setDirty() #notify the form of this change
+          scope.$emit 'file-dropzone-drop-event', {file: file}          
+
         false
   )