title: AngularJS file drag and drop in directive
body: <p>This example does pretty much what I would like to port in Angular-js: <a href="http://html5demos.com/file-api#view-source" rel="noreferrer">HTML5 File API</a>.</p>
  
  <p>I have been trying to google some example of directives however I found old example that do massive use of DOM or are not written for Angular 1.0.4.</p>
  
  <p>Basically this is the pure js code:</p>
  
  <pre><code>var holder = document.getElementById('holder'),
      state = document.getElementById('status');
  
  if (typeof window.FileReader === 'undefined') {
    state.className = 'fail';
  } else {
    state.className = 'success';
    state.innerHTML = 'File API &amp; FileReader available';
  }
  
  holder.ondragover = function () { this.className = 'hover'; return false; };
  holder.ondragend = function () { this.className = ''; return false; };
  holder.ondrop = function (e) {
    this.className = '';
    e.preventDefault();
  
    var file = e.dataTransfer.files[0],
        reader = new FileReader();
    reader.onload = function (event) {
      console.log(event.target);
      holder.style.background = 'url(' + event.target.result + ') no-repeat center';
    };
    console.log(file);
    reader.readAsDataURL(file);
  
    return false;
  };
  </code></pre>
  
  <p>The only possible way I can think of is creating a directive that does</p>
  
  <pre><code>edo.directive('fileDrag', function () {
    return {
      restrict: 'A',
      link: function (scope, elem) {
        elem.bind('ondrop', function(e){
          e.preventDefault();
          var file = e.dataTransfer.files[0], reader = new FileReader();
            reader.onload = function (event) {
            console.log(event.target);
            holder.style.background = 'url(' + event.target.result + ') no-repeat center';
          };
          console.log(file);
          reader.readAsDataURL(file);
  
          return false;
        });
      }
    };
  });
  </code></pre>
  
  <p>However (1) it did not work, (2) before I fix it I would like to know if something exists or if I am doing it properly,</p>
  
  <p>Any hint or help is very much appreciated.</p>