An AngularJS directive for quickly incorporate a drop-target that works with Filepicker.io

gistfile1.coffee

window.stepsApp.directive 'filepickerPane', ()->
  ($scope, element, attrs)->
    initialHtml = element.html()
    dragOverClass = attrs.dragOverClass
    onUploadSuccess = attrs.onUploadSuccess
    onUploadError = attrs.onUploadError
    
    filepicker.makeDropPane element,
      multiple: true
      dragEnter: ()->
        element.html "Drop to upload"
        element.addClass dragOverClass if dragOverClass

      dragLeave: ()->
        element.html initialHtml
        element.removeClass dragOverClass if dragOverClass

      onSuccess: (fpfiles)->
        $scope.$apply ()->
          $scope[onUploadSuccess](fpfiles) if onUploadSuccess

      onError: (type, message)->
        $scope.$apply ()->
          $scope[onUploadError](type, message) if onUploadError

      onProgress: (percentage)->
        element.text "Uploading (#{percentage}%)"

        if percentage >= 100
          setTimeout ()->
            element.html initialHtml
            element.removeClass dragOverClass if dragOverClass
          , 1000

gistfile2.haml

.file_drop_panel{"filepicker_pane"=>true, "drag-over-class"=>"file_drop_drag_over", "on-upload-success"=>"filepickerUploadSuccess"}
  Drop files here