gistfile1.txt

camera = '<input id="picture" type="file" accept="image/*" >'
image = '<img>'

var cam, img;

//create or get input element
cam = angular.element(camera); 
img = angular.element(image);

//add input element to dom if you created it
elem[0].appendChild(cam[0]); 
elem[0].appendChild(img[0]);

//when you choose an image this fires
cam[0].addEventListener('change', function(evt) {
  var _ref;

  //set displayed img to blank 1px image
  img[0].src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='

  //for each object in evt.target.files
  // adding more than one image would need better logic
  // like dynamic created thumbnails
  _.each((_ref = evt.target) != null ? _ref.files : void 0, function(f) {
    var reader;
    reader = new FileReader();
    reader.onload = function(theFile) {
      console.log(theFile.target.result);
      
      img[0].src = theFile.target.result;
    };
    reader.readAsDataURL(f);
  });

});
    




coffeescript
-------------------------------------------------------------
app.directive 'test', [ ->
  camera = '<input id="picture" type="file" accept="image/*" capture="camera">'
  image = '<img>'

  restrict: 'EA'
  link: (scope, elem, attrs) ->
    cam = angular.element(camera)
    img = angular.element(image)
    elem[0].appendChild(cam[0])
    elem[0].appendChild(img[0])

    cam[0].addEventListener('change', (evt) ->
      img[0].src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
      _.each evt.target?.files, (f) ->
        reader = new FileReader()
        reader.onload = (theFile) ->
          console.log theFile.target.result
          img[0].src = theFile.target.result
        reader.readAsDataURL(f)
    )
]