Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
This directive uses the HTML5 drag and drop spec as well as the FileReader to base64 encode the dropped files. This allows for easy client/server transfer via REST protocol.
'use strict';
.directive('fileDropzone', () ->
restrict: 'A'
scope: {
file: '='
fileName: '='
link: (scope, element, attrs) ->
# function to prevent default behavior (browser loading image)
processDragOverOrEnter = (event) ->
event.dataTransfer.effectAllowed = 'copy'
validMimeTypes = attrs.fileDropzone
# if the max file size is provided and the size of dropped file is greater than it,
# it's an invalid file and false is returned
checkSize = (size) ->
if attrs.maxFileSize in [undefined, ''] or (size / 1024) / 1024 < attrs.maxFileSize
alert "File must be smaller than #{attrs.maxFileSize} MB"
isTypeValid = (type) ->
if validMimeTypes in [undefined, ''] or validMimeTypes.indexOf(type) > -1
# return true if no mime types are provided
alert "Invalid file type. File must be one of following types #{validMimeTypes}"
# 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
# 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) ->
reader = new FileReader()
reader.onload = (evt) ->
if checkSize(size) and isTypeValid(type)
scope.$apply ->
scope.file =
scope.fileName = name if angular.isString scope.fileName
file = event.dataTransfer.files[0]
name =
type = file.type
size = file.size
return false

This comment has been minimized.

Copy link
Owner Author

lsiv568 commented May 21, 2013

Sample Usage:

<div file-dropzone="[image/png, image/jpeg, image/gif]" file="ctrlBoundImage", file-name="ctrlBoundFileName"
         data-max-file-size="3" style="width: 150px; height: 150px; border: 1px solid">
  <span>Drop Background Images Here</span>
  <img ng-src={{ctrlBoundImage}} />

This comment has been minimized.

Copy link

malino commented Sep 7, 2013

creating a module requires a second argument, in this case, an empty array should do fine.

angular.module('reusableThings', [])


This comment has been minimized.

Copy link
Owner Author

lsiv568 commented Sep 18, 2013

A copy of this directive can be incorporated into your app via bower install angular-file-dnd

See the repo here:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.