Skip to content

Instantly share code, notes, and snippets.

@alireza-ahmadi
Created May 12, 2014 21:45
Show Gist options
  • Save alireza-ahmadi/543a1e5a3ba2a7953c8f to your computer and use it in GitHub Desktop.
Save alireza-ahmadi/543a1e5a3ba2a7953c8f to your computer and use it in GitHub Desktop.
Simple AngularJS directive for drag and drop file upload in coffeescript
angular
.module 'DropzoneDirective', []
.directive 'dropzone', ->
restrict: 'A'
scope :
onComplete : '&'
link: (scope, element, attrs) ->
element.bind 'dragover', (event) ->
event.stopPropagation()
event.preventDefault()
element.addClass 'state-hover'
return
element.bind 'drop', (event) ->
event.stopPropagation()
event.preventDefault()
element.removeClass 'state-hover'
files = event.dataTransfer.files
reader = new FileReader()
reader.onload = (event) ->
data = btoa event.target.result
scope.onComplete file : data
return
reader.readAsText(files[0], 'UTF-8')
return
element.bind 'dragleave', (event) ->
event.stopPropagation()
event.preventDefault
element.removeClass 'state-hover'
return
return
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment