AngularJS file drag and drop in directive

Question

This example does pretty much what I would like to port in Angular-js: HTML5 File API.

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.

Basically this is the pure js 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 & 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; }; 

The only possible way I can think of is creating a directive that does

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;       });     }   }; }); 

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,

Any hint or help is very much appreciated.

Answer 1

To consolidate the comments into an answer, change ondrop to drop, add e.stopPropagation(), change holder to elem.

edo.directive('fileDrag', function () {   return {     restrict: 'A',     link: function (scope, elem) {       elem.bind('drop', function(e){         e.preventDefault();         e..stopPropagation();         var file = e.dataTransfer.files[0], reader = new FileReader();           reader.onload = function (event) {           console.log(event.target);           elem.style.background = 'url(' + event.target.result + ') no-repeat center';         };         console.log(file);         reader.readAsDataURL(file);          return false;       });     }   }; }); 

I was doing something similar and here is my working solution:

HTML

app.directive("dropzone", function() {      return {          restrict : "A",          link: function (scope, elem) {              elem.bind('drop', function(evt) {                  evt.stopPropagation();                  evt.preventDefault();                    var files = evt.dataTransfer.files;                  for (var i = 0, f; f = files[i]; i++) {                      var reader = new FileReader();                      reader.readAsArrayBuffer(f);                        reader.onload = (function(theFile) {                          return function(e) {                              var newFile = { name : theFile.name,                                  type : theFile.type,                                  size : theFile.size,                                  lastModifiedDate : theFile.lastModifiedDate                              }                                scope.addfile(newFile);                          };                      })(f);                  }              });          }      }  });

div[dropzone] {      border: 2px dashed #bbb;      border-radius: 5px;      padding: 25px;      text-align: center;      font: 20pt bold;      color: #bbb;      margin-bottom: 20px;  }

<div dropzone>Drop Files Here</div>