Catch event when file is dropped or uploaded via button

_upload_image_input.html.haml

%div{ style: 'display: none;' }
  %input{ type: 'file', id: 'uploadImageInput' }

pubsub-file.coffee

#= require jquery
#= require underscore
#= require pubsub

$(document).on 'ready page:load ajaxComplete nested:fieldAdded', (e)->
  $parent = $(e.field or e.target)

  return if $parent.data('pubsubFile') is true
  $parent.data('pubsubFile', true)

  $parent.on 'dragenter',   (e)=> pubsub.pub('onDragEnterFile', event: e); e.stopPropagation(); e.preventDefault(); return false;
  $parent.on 'dragleave',   (e)=> pubsub.pub('onDragLeaveFile', event: e); e.stopPropagation(); e.preventDefault(); return false;
  $parent.on 'dragover',    (e)=> pubsub.pub('onDragOverFile', event: e); e.stopPropagation(); e.preventDefault(); return false;
  $parent.on 'drop', (e)=>
    if _.any(e.originalEvent.dataTransfer.files)
      file = _.first(e.originalEvent.dataTransfer.files)
      return false unless file && file.type.match(/image.*/)
      reader = new FileReader()
      reader.onload = (e)-> pubsub.pub('onSendFile', dataUrl: e.target.result, file: file)
      reader.readAsDataURL(file)
    e.stopPropagation(); e.preventDefault();
    return false

  $parent.find('#uploadImageInput').each ->
    pubsub.sub 'triggerUploadImageInput', => $(@).trigger('click')
    $(@).on 'change', (e)->
      file = _.first @files
      return false unless file && file.type.match(/image.*/)

      reader = new FileReader()
      reader.onload = (e)=>
        pubsub.pub 'onSendFile', dataUrl: e.target.result, file: file
        $(@).val('')
      reader.readAsDataURL(file)