Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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';
angular.module('reusableThings')
.directive('fileDropzone', () ->
restrict: 'A'
scope: {
file: '='
fileName: '='
}
link: (scope, element, attrs) ->
# function to prevent default behavior (browser loading image)
processDragOverOrEnter = (event) ->
event?.preventDefault()
event.dataTransfer.effectAllowed = 'copy'
false
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
true
else
alert "File must be smaller than #{attrs.maxFileSize} MB"
false
isTypeValid = (type) ->
if validMimeTypes in [undefined, ''] or validMimeTypes.indexOf(type) > -1
true
else
# return true if no mime types are provided
alert "Invalid file type. File must be one of following types #{validMimeTypes}"
false
# 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) ->
event?.preventDefault()
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
file = event.dataTransfer.files[0]
name = file.name
type = file.type
size = file.size
reader.readAsDataURL(file)
return false
)
@lsiv568
Owner

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>
</div>
<div>
  <img ng-src={{ctrlBoundImage}} />
  <span>{{ctrlBoundFileName}}</span>
</div>
@malino

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

angular.module('reusableThings', [])

@lsiv568
Owner

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

See the repo here: https://github.com/onemightyroar/angular-file-dnd

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.