Búsqueda de sitios web

angular - ¿Cómo filtrar un objeto FileList elegido por el selector de directorios en Javascript/typescript?

Estoy tratando de filtrar o eliminar algunos archivos del objeto FileList. He obtenido un objeto FileList del selector de directorio.

<input type="file" accept="image/*" webkitdirectory directory multiple>

En mi archivo .ts:

public fileChangeListener($event: any) {
 let selectedFiles=$event.target.files; //Object of Filelist
}

selectedFileList contiene diferentes tipos de archivos como image/jpg, image/png, application/javascript, application/pdf, etc. Quiero obtener un objeto FileList con solo archivos de tipo imagen. ¿Cómo puedo obtenerlo?

nota: accept="image/*" en el elemento input de HTML no funciona aquí.

{
lastModified:1521624250148,
lastModifiedDate:Wed Mar 21 2018 15:24:10 GMT+0600 (+06) {},
name:"rxlnn70l.bmp",
size:814138,
type:"image/bmp",
webkitRelativePath:"second/rxlnn70l.bmp",
}

Aquí en mi código error: files.slice no es una función

Respuesta #1

Usa el operador de propagación ... para convertir FileList en Array y filtrar lo mismo comprobando si su type contiene el subtexto 'image'.

   var files = e.target.files;
   files = [...files].filter( s => s.type.includes("image") )

Demostración

document.querySelector( "[type='file']" ).addEventListener( "change", function(e){
   var files = e.target.files;
   files = [...files].filter( s => s.type.includes("image") )
   console.log(files);
})
<input type="file" accept="image/*" webkitdirectory directory multiple>

Editar

Si el operador de propagación no es compatible con tu navegador, entonces usa uno de los siguientes

files = Array.from(files).filter( function(s){ 
    return s.type.includes("image") ;
});

O

files = [].slice.call(files).filter( function(s){ 
    return s.type.includes("image") ;
});

Artículos relacionados