tengo la sospecha de que enrealidad el porque de que no te funcionara es porque estabas tratando de leer una lista completa de archivos de una sola vez con el FileReader
, es decir, checa esto que hiciste:
Primero en la funcion soltar haces esto:
var archivo=e.dataTransfer.files;
leerArchivo(e,archivo);
El tema es que e.dataTransfer.files
te retorna un objeto FileList
y no directamente un arreglo normal, esto pasa asi sea un solo archivo, por ende cuando tu haces:
lector.readAsText(archivo);
En tu otra funcion, esta mal, pues se supone que FileReader
acepta ya sea un tipo Blob
o un tipo File
, no un FileList
. por ende lo que debiste haber hecho es recorrer el FileList
y ejecutar la lectura por cada uno de los archivos contenidos en el FileList
.
Muy bien, corrigiendo este problema me ayude de esta pagina de aqui:
Drag & Drop
La cual nos especifica muy claramente y de manera muy detallada todo lo que debes hacer para usar el sistema drag & drop
, por ende cree un ejemplo tomando en cuenta tu funcion leerArchivo
que tu hiciste, lo unico es que la modifique por lo que te comente antes:
window.onload = ()=>{
const dragArea = document.getElementById("drag_area");
function dropHandler(ev) {
// Evitar el comportamiendo por defecto (Evitar que el fichero se abra/ejecute)
ev.preventDefault();
const files = [];
if (ev.dataTransfer.items) {
// Usar la interfaz DataTransferItemList para acceder a el/los archivos)
for (let i = 0; i < ev.dataTransfer.items.length; i++) {
// Si los elementos arrastrados no son ficheros, rechazarlos
if (ev.dataTransfer.items[i].kind === 'file') {
files.push(ev.dataTransfer.items[i].getAsFile());
}
}
} else {
// Usar la interfaz DataTransfer para acceder a el/los archivos
for (let i = 0; i < ev.dataTransfer.files.length; i++) {
files.push(ev.dataTransfer.files[i]);
}
}
//Llamamos a la funcion que se encarga de leer los archivos
leerArchivo(files);
// Pasar el evento a removeDragData para limpiar
removeDragData(ev)
}
function removeDragData(ev) {
if (ev.dataTransfer.items) {
// Use DataTransferItemList interface to remove the drag data
ev.dataTransfer.items.clear();
} else {
// Use DataTransfer interface to remove the drag data
ev.dataTransfer.clearData();
}
}
function dragOverHandler(ev){
ev.preventDefault();
}
function leerArchivo(archivos){
if(!archivos) alert('No se selecciono ningun archivo');
archivos.forEach(archivo =>{
const lector = new FileReader();
lector.onload = e =>{
let contenido = e.target.result;
console.log(contenido);
};
lector.readAsText(archivo);
});
}
dragArea.addEventListener("drop", dropHandler);
dragArea.addEventListener("dragover", dragOverHandler);
}
.drag_area{
display: flex;
justify-content: center;
align-items: center;
background: grey;
width: 450px;
height: 300px;
}
.drag_area > p{
display: inline-block;
color: #fff;
}
<div class = "drag_area" id = "drag_area">
<p>Arrastre archivos aqui...</p>
</div>
NOTA: La mayor parte del codigo fue sacada de la pagina, yo lo unico que hice fue adaptarlo para que coincida con ES6
y quitarle lineas innecesarias.