html5 - por - read file javascript

Detectar carpetas/directorios en objetos JavaScript FileList

Question

Recientemente he contribuido con un código para Moodle que usa algunas de las capacidades de HTML5 para permitir que los archivos se carguen en formularios mediante arrastrar y soltar desde el escritorio (la parte central del código está aquí: https://github.com/moodle). /moodle/blob/master/lib/form/dndupload.js para referencia).

Esto funciona bien, excepto cuando un usuario arrastra una carpeta / directorio en lugar de un archivo real. La basura luego se carga en el servidor, pero con el nombre de archivo que coincide con la carpeta.

Lo que estoy buscando es una forma fácil y confiable de detectar la presencia de una carpeta en el objeto FileList , así puedo omitirla (y probablemente también devuelva un mensaje de error amistoso).

Revisé la documentación en MDN, así como una búsqueda web más general, pero no encontré nada. También revisé los datos en las herramientas de desarrollo de Chrome y parece que el ''tipo'' del objeto Archivo está establecido de forma consistente en "" para las carpetas. Sin embargo, no estoy del todo convencido de que este sea el método de detección más confiable entre navegadores.

¿Alguien tiene mejores sugerencias?

Answer 1

Otra nota es que ese tipo es "" para cualquier archivo que tenga una extensión desconocida. Intente cargar un archivo llamado test.blah y el tipo estará vacío. Y ... intenta arrastrar y soltar una carpeta llamada test.jpg - type se establecerá en "image / jpeg". Para ser 100% correcto, no puede depender únicamente del tipo (o si realmente lo hace).

En mis pruebas, las carpetas siempre han sido del tamaño 0 (en FF y Chrome en Windows 7 de 64 bits y bajo Linux Mint (Ubuntu esencialmente). Por lo tanto, mi verificación de carpeta es solo verificar si el tamaño es 0 y parece funcionar para mí en nuestro entorno. Tampoco queremos que se carguen archivos de 0 bytes, de modo que si es de 0 bytes, el mensaje aparece como "omitido: 0 bytes (o carpeta)".

Answer 2

FileReader.readAsBinaryString llamar a FileReader.readAsBinaryString en el objeto File . En Firefox, esto generará una excepción cuando el File sea ​​un Directory . Solo hago esto si el File cumple con las condiciones propuestas por gilly3.

Consulte la publicación de mi blog en http://hs2n.wordpress.com/2012/08/13/detecting-folders-in-html-drop-area/ para obtener más información.

Además, la versión 21 de Google Chrome ahora admite la eliminación de carpetas. Puede verificar fácilmente si los elementos descartados son carpetas y también leer sus contenidos.

Desafortunadamente, no tengo ninguna solución (del lado del cliente) para las versiones anteriores de Chrome.

Answer 3

FYI, esta publicación te dirá cómo usar la API dataTransfer en Chrome para detectar el tipo de archivo: http://updates.html5rocks.com/2012/07/Drag-and-drop-a-folder-onto-Chrome-now-available

Answer 4

También encontré este problema y debajo está mi solución. Básicamente, tomé un enfoque doble:

(1) compruebe si el tamaño del objeto File es grande y considérelo como un archivo genuino si tiene más de 1 MB (supongo que las carpetas nunca son tan grandes). (2) Si el objeto File es más pequeño que 1MB, entonces lo leo usando el método ''readAsArrayBuffer'' de FileReader. La lectura exitosa llama ''onload'' y creo que esto indica que el objeto de archivo es un archivo genuino. Las lecturas fallidas llaman ''onerror'' y lo considero un directorio. Aquí está el código:

var isLikelyFile = null;
if (f.size > 1048576){ isLikelyFile = false; }
else{
    var reader = new FileReader();
    reader.onload = function (result) { isLikelyFile = true; };
    reader.onerror = function(){ isLikelyFile = false; };
    reader.readAsArrayBuffer(f);
}
//wait for reader to finish : should be quick as file size is < 1MB ;-)
var interval = setInterval(function() {
    if (isLikelyFile != null){
        clearInterval(interval);
        console.log(''finished checking File object. isLikelyFile = '' + isLikelyFile);
    }
}, 100);

Probé esto en FF 26, Chrome 31 y Safari 6 y tres navegadores llaman ''onerror'' cuando intento leer directorios. Avíseme si alguien puede pensar en un caso de uso donde esto falla.

Answer 5

No puede confiar en file.type . Un archivo sin una extensión tendrá un tipo de "" . Guarde un archivo de texto con una extensión .jpg y cárguelo en un control de archivo, y su tipo se mostrará como image/jpeg . Y una carpeta llamada "someFolder.jpg" también tendrá su tipo de image/jpeg .

Intente leer el archivo con un FileReader . Si se arrastra un directorio, el FileReader generará el evento de error :

var reader = new FileReader();
reader.onload = function (e) {
    // it''s a file
};
reader.onerror = function (e) {
    // it''s a directory
};
reader.readAsText(file);

Afortunadamente, en IE11, cuando se descarta un directorio, la colección e.dataTransfer.files está vacía.

Chrome expone una propiedad adicional en los e.dataTransfer llamados e.dataTransfer items contienen una colección de objetos DataTransferItem . En cada uno de estos objetos, puede llamar a item.webkitGetAsEntry() , que devuelve un objeto Entry . El objeto Entry tiene las propiedades isDirectory y isFile :

// Chrome only
if (e.dataTransfer.items && e.dataTransfer.items.length) {
   [].forEach.call(e.dataTransfer.items, function(item) {
      var entry = item.webkitGetAsEntry();
      if (entry && entry.isFile) {
         var file = item.getAsFile(); // same as object in e.dataTransfer.files[]
         // do something with the file
      }
   }
}

Curiosamente, en mi experimentación, cada carpeta que he visto ha tenido su File.size % 4096 como cero. Sin embargo, por supuesto, algunos archivos también tendrán eso. File.size no es un indicador confiable de si un archivo es realmente una carpeta.