Archivo AngularJS arrastrar y soltar en la directiva
Este ejemplo hace más o menos lo que me gustaría portar en Angular-js:API de archivos HTML5.
He estado intentando buscar en Google algún ejemplo de directivas, sin embargo, encontré un ejemplo antiguo que hace un uso masivo de DOM o no está escrito para Angular 1.0.4.
Básicamente este es el código js puro:
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;
};
La única forma posible en la que puedo pensar es crear una directiva que lo haga.
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;
});
}
};
});
Sin embargo (1) no funcionó, (2) antes de arreglarlo, me gustaría saber si algo existe o si lo estoy haciendo correctamente.
Cualquier sugerencia o ayuda es muy apreciada.