From 8d4c58dd9e9e032187fec9d385b8c9d191c503ce Mon Sep 17 00:00:00 2001 From: Henric Malmberg Date: Fri, 11 Apr 2014 12:15:11 +0200 Subject: [PATCH 1/3] set element class on hover --- dist/angular-file-dnd.js | 8 +++++++- dist/angular-file-dnd.min.js | 2 +- src/directive/file_dropzone.coffee | 7 ++++++- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/dist/angular-file-dnd.js b/dist/angular-file-dnd.js index a694707..36c618a 100644 --- a/dist/angular-file-dnd.js +++ b/dist/angular-file-dnd.js @@ -5,7 +5,8 @@ restrict: 'A', scope: { file: '=', - fileName: '=' + fileName: '=', + dropzoneHoverClass: '@' }, link: function(scope, element, attrs) { var checkSize, getDataTransfer, isTypeValid, processDragOverOrEnter, validMimeTypes; @@ -15,6 +16,7 @@ }; processDragOverOrEnter = function(event) { if (event) { + element.addClass(scope.dropzoneHoverClass); if (event.preventDefault) { event.preventDefault(); } @@ -45,11 +47,15 @@ }; element.bind('dragover', processDragOverOrEnter); element.bind('dragenter', processDragOverOrEnter); + element.bind('dragleave', function() { + return element.removeClass(scope.dropzoneHoverClass); + }); return element.bind('drop', function(event) { var file, name, reader, size, type; if (event != null) { event.preventDefault(); } + element.removeClass(scope.dropzoneHoverClass); reader = new FileReader(); reader.onload = function(evt) { if (checkSize(size) && isTypeValid(type)) { diff --git a/dist/angular-file-dnd.min.js b/dist/angular-file-dnd.min.js index 8ff22bf..a9a44a4 100644 --- a/dist/angular-file-dnd.min.js +++ b/dist/angular-file-dnd.min.js @@ -1 +1 @@ -!function(){"use strict";angular.module("omr.angularFileDnD",[]).directive("fileDropzone",function(){return{restrict:"A",scope:{file:"=",fileName:"="},link:function(a,b,c){var d,e,f,g,h;return e=function(a){var b;return b=a.dataTransfer||a.originalEvent.dataTransfer},g=function(a){return a&&(a.preventDefault&&a.preventDefault(),a.stopPropagation)?!1:(e(a).effectAllowed="copy",!1)},h=c.fileDropzone,d=function(a){var b;return void 0===(b=c.maxFileSize)||""===b||a/1024/1024-1?!0:(alert("Invalid file type. File must be one of following types "+h),!1)},b.bind("dragover",g),b.bind("dragenter",g),b.bind("drop",function(b){var c,g,h,i,j;return null!=b&&b.preventDefault(),h=new FileReader,h.onload=function(b){return d(i)&&f(j)?(a.$apply(function(){return a.file=b.target.result,angular.isString(a.fileName)?a.fileName=g:void 0}),a.$emit("file-dropzone-drop-event",{file:a.file,type:j,name:g,size:i})):void 0},c=e(b).files[0],g=c.name,j=c.type,i=c.size,h.readAsDataURL(c),!1})}}})}.call(this); \ No newline at end of file +(function(){"use strict";angular.module("omr.angularFileDnD",[]).directive("fileDropzone",function(){return{restrict:"A",scope:{file:"=",fileName:"=",dropzoneHoverClass:"@"},link:function(a,b,c){var d,e,f,g,h;return e=function(a){var b;return b=a.dataTransfer||a.originalEvent.dataTransfer},g=function(c){return c&&(b.addClass(a.dropzoneHoverClass),c.preventDefault&&c.preventDefault(),c.stopPropagation)?!1:(e(c).effectAllowed="copy",!1)},h=c.fileDropzone,d=function(a){var b;return void 0===(b=c.maxFileSize)||""===b||a/1024/1024-1?!0:(alert("Invalid file type. File must be one of following types "+h),!1)},b.bind("dragover",g),b.bind("dragenter",g),b.bind("dragleave",function(){return b.removeClass(a.dropzoneHoverClass)}),b.bind("drop",function(c){var g,h,i,j,k;return null!=c&&c.preventDefault(),b.removeClass(a.dropzoneHoverClass),i=new FileReader,i.onload=function(b){return d(j)&&f(k)?(a.$apply(function(){return a.file=b.target.result,angular.isString(a.fileName)?a.fileName=h:void 0}),a.$emit("file-dropzone-drop-event",{file:a.file,type:k,name:h,size:j})):void 0},g=e(c).files[0],h=g.name,k=g.type,j=g.size,i.readAsDataURL(g),!1})}}})}).call(this); \ No newline at end of file diff --git a/src/directive/file_dropzone.coffee b/src/directive/file_dropzone.coffee index 5ab1a9e..cd5c11c 100644 --- a/src/directive/file_dropzone.coffee +++ b/src/directive/file_dropzone.coffee @@ -6,6 +6,7 @@ angular.module('omr.angularFileDnD', []) scope: { file: '=' fileName: '=' + dropzoneHoverClass: '@' } link: (scope, element, attrs) -> @@ -15,6 +16,7 @@ angular.module('omr.angularFileDnD', []) # function to prevent default behavior (browser loading image) processDragOverOrEnter = (event) -> if event + element.addClass scope.dropzoneHoverClass event.preventDefault() if event.preventDefault return false if event.stopPropagation getDataTransfer(event).effectAllowed = 'copy' @@ -43,11 +45,14 @@ angular.module('omr.angularFileDnD', []) # event and specify copy as the allowable effect element.bind 'dragover', processDragOverOrEnter element.bind 'dragenter', processDragOverOrEnter + element.bind 'dragleave', -> + element.removeClass scope.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) -> event?.preventDefault() + element.removeClass scope.dropzoneHoverClass reader = new FileReader() reader.onload = (evt) -> @@ -63,4 +68,4 @@ angular.module('omr.angularFileDnD', []) size = file.size reader.readAsDataURL file false - ) \ No newline at end of file + ) From b8effa816584f48f3c5e5d9b928e82e8a2edd2e5 Mon Sep 17 00:00:00 2001 From: Henric Malmberg Date: Mon, 14 Apr 2014 16:44:32 +0200 Subject: [PATCH 2/3] return unencoded/original file as well --- src/directive/file_dropzone.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/directive/file_dropzone.coffee b/src/directive/file_dropzone.coffee index cd5c11c..0eb7d63 100644 --- a/src/directive/file_dropzone.coffee +++ b/src/directive/file_dropzone.coffee @@ -60,7 +60,7 @@ angular.module('omr.angularFileDnD', []) scope.$apply -> scope.file = evt.target.result scope.fileName = name if angular.isString scope.fileName - scope.$emit 'file-dropzone-drop-event', {file: scope.file, type: type, name: name, size: size} + scope.$emit 'file-dropzone-drop-event', {unencodedFile: file, file: scope.file, type: type, name: name, size: size} file = getDataTransfer(event).files[0] name = file.name From 3946be4f7ee56092043cae807f1724343253b654 Mon Sep 17 00:00:00 2001 From: Henric Malmberg Date: Mon, 14 Apr 2014 16:50:56 +0200 Subject: [PATCH 3/3] latest build --- dist/angular-file-dnd.js | 1 + dist/angular-file-dnd.min.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/dist/angular-file-dnd.js b/dist/angular-file-dnd.js index 36c618a..964a031 100644 --- a/dist/angular-file-dnd.js +++ b/dist/angular-file-dnd.js @@ -66,6 +66,7 @@ } }); return scope.$emit('file-dropzone-drop-event', { + unencodedFile: file, file: scope.file, type: type, name: name, diff --git a/dist/angular-file-dnd.min.js b/dist/angular-file-dnd.min.js index a9a44a4..6af8e88 100644 --- a/dist/angular-file-dnd.min.js +++ b/dist/angular-file-dnd.min.js @@ -1 +1 @@ -(function(){"use strict";angular.module("omr.angularFileDnD",[]).directive("fileDropzone",function(){return{restrict:"A",scope:{file:"=",fileName:"=",dropzoneHoverClass:"@"},link:function(a,b,c){var d,e,f,g,h;return e=function(a){var b;return b=a.dataTransfer||a.originalEvent.dataTransfer},g=function(c){return c&&(b.addClass(a.dropzoneHoverClass),c.preventDefault&&c.preventDefault(),c.stopPropagation)?!1:(e(c).effectAllowed="copy",!1)},h=c.fileDropzone,d=function(a){var b;return void 0===(b=c.maxFileSize)||""===b||a/1024/1024-1?!0:(alert("Invalid file type. File must be one of following types "+h),!1)},b.bind("dragover",g),b.bind("dragenter",g),b.bind("dragleave",function(){return b.removeClass(a.dropzoneHoverClass)}),b.bind("drop",function(c){var g,h,i,j,k;return null!=c&&c.preventDefault(),b.removeClass(a.dropzoneHoverClass),i=new FileReader,i.onload=function(b){return d(j)&&f(k)?(a.$apply(function(){return a.file=b.target.result,angular.isString(a.fileName)?a.fileName=h:void 0}),a.$emit("file-dropzone-drop-event",{file:a.file,type:k,name:h,size:j})):void 0},g=e(c).files[0],h=g.name,k=g.type,j=g.size,i.readAsDataURL(g),!1})}}})}).call(this); \ No newline at end of file +(function(){"use strict";angular.module("omr.angularFileDnD",[]).directive("fileDropzone",function(){return{restrict:"A",scope:{file:"=",fileName:"=",dropzoneHoverClass:"@"},link:function(a,b,c){var d,e,f,g,h;return e=function(a){var b;return b=a.dataTransfer||a.originalEvent.dataTransfer},g=function(c){return c&&(b.addClass(a.dropzoneHoverClass),c.preventDefault&&c.preventDefault(),c.stopPropagation)?!1:(e(c).effectAllowed="copy",!1)},h=c.fileDropzone,d=function(a){var b;return void 0===(b=c.maxFileSize)||""===b||a/1024/1024-1?!0:(alert("Invalid file type. File must be one of following types "+h),!1)},b.bind("dragover",g),b.bind("dragenter",g),b.bind("dragleave",function(){return b.removeClass(a.dropzoneHoverClass)}),b.bind("drop",function(c){var g,h,i,j,k;return null!=c&&c.preventDefault(),b.removeClass(a.dropzoneHoverClass),i=new FileReader,i.onload=function(b){return d(j)&&f(k)?(a.$apply(function(){return a.file=b.target.result,angular.isString(a.fileName)?a.fileName=h:void 0}),a.$emit("file-dropzone-drop-event",{unencodedFile:g,file:a.file,type:k,name:h,size:j})):void 0},g=e(c).files[0],h=g.name,k=g.type,j=g.size,i.readAsDataURL(g),!1})}}})}).call(this); \ No newline at end of file