AngularJS file drag and drop in directive

javascript html file-upload angularjs angularjs-directive

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>

Expand snippet