AngularJS | Service | FileReader and ImageReader services (HTML5 File API)

file_reader.coffee

'use strict'

app = angular.module 'app'

app.factory 'FileReader', ($q) ->

  readDataAsUrl: (file, scope) ->
    deferred = $q.defer()

    reader = new FileReader()

    reader.onload = ->
      scope.$apply ->
        deferred.resolve reader.result

    reader.onerror = ->
      scope.$apply ->
        deferred.reject reader.result

    reader.onprogress = (event) ->
      scope.$broadcast 'fileProgress',
        total  : event.total
        loaded : event.loaded

    reader.readAsDataURL file

    deferred.promise
    

image_reader.coffee

'use strict'

app = angular.module 'app'

app.factory 'ImageReader', ($q, FileReader) ->

  readDataAsUrl: (imageFile, scope) ->
    FileReader.readDataAsUrl imageFile, scope
    .then (result) ->
      deferred = $q.defer()

      img = new Image()

      img.onload = ->
        scope.$apply ->
          deferred.resolve img

      img.onerror = ->
        scope.$apply ->
          deferred.reject img

      img.src = result

      deferred.promise