angular-file-drop/src/index.coffee

app = angular.module 'ngFileDrop', []
app.directive 'dropZone', ->
	restrict: 'A'
	link: (scope, element, attrs) ->
		element = $(element[0])

		# Hidden file input
		$("body").append '<input type=file style="display: none" class="__dropZoneInput">'

		# Events listeners
		element[0].addEventListener 'dragover', (event) ->
			event.preventDefault()
			event.stopPropagation()

			element.addClass 'dragging'
		element[0].addEventListener 'dragleave', (event) ->
			event.preventDefault()
			event.stopPropagation()

			element.removeClass 'dragging'

		element[0].addEventListener 'drop', (e) ->
			event.preventDefault()
			event.stopPropagation()

			files = e.dataTransfer.files

			handleFiles files

		$(".__dropZoneInput").on 'change', ->
			files = @files

			handleFiles files

		element.click ->
			$(".__dropZoneInput").click()

		handleFiles = (files) ->
			reader = new FileReader
			reader.readAsDataURL files[0]
			reader.onload = (res) ->
				scope.$apply ->
					scope.file = res.target.result

			count = files.length
			scope.$apply ->
				scope.files = []
			for file in files
				reader = new FileReader
				reader.readAsDataURL file
				reader.onload = (res) ->
					scope.$apply ->
						scope.files.push res.target.result
					count--
					if count == 0
						scope.$apply ->
							do scope.drop

	scope: 
		file: '=file'
		files: '=files'
		drop: '=drop'