Tips on sorting a FileList object selected by a directory picker in JavaScript/TypeScript

Question

Tips on sorting a FileList object selected by a directory picker in JavaScript/TypeScript

I need to filter or eliminate certain files from a FileList object that I obtained from a directory chooser.

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

Within my .ts file:

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

The selectedFileList contains different types of files such as image/jpg, image/png, application/javascript, application/pdf, etc. I specifically want to retrieve a FileList Object with only image type files. How can this be achieved?

Note: The use of `accept="image/*"` in the HTML input element does not have the intended effect here.

{
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",
}

In my code I encounter the issue

error: files.slice is not a function

.

javascript angular typescript

Answer 1

Answer №1

Utilize the spread operator ... to transform a FileList into an Array and then narrow it down by checking if its type contains the sub-text 'image'.

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

Example

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>

Modify

If your browser does not support the spread operator, you can use one of the following alternatives:

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

Or

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

Answer 2

Utilize the spread operator ... to transform a FileList into an Array and then narrow it down by checking if its type contains the sub-text 'image'.

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

Example

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>

Modify

If your browser does not support the spread operator, you can use one of the following alternatives:

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

Or

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

Tips on sorting a FileList object selected by a directory picker in JavaScript/TypeScript

Answer №1

Similar questions

Show blank value if there are no search results, along with an additional menu option

Can you please explain the significance of classes <T> and <U> in Angular 2?

React-hook-form does not display the input length in a custom React component

Can you explain the distinction between ng test and ng e2e?

The popularity of AJAX in JavaScript is continuing to rise

The specified timeout elapsed without the jasmine async callback being invoked

Navigating in Angular 2 RC4 with Path Variables Containing Special Symbols

Why is it that one of my useQuery hooks is returning a value while the other one is returning undefined?

Click on the button to generate a PDF report using Internet Explorer 11

The ng-repeat functionality in Angular 2 is not functioning correctly when trying to select an option from an array of objects. Instead of displaying the actual object, it is

When the keyboard appears, the Ionic 2 form smoothly slides upwards

"Utilizing Typescript's keyof operator on its own

Send a value to several PHP pages simultaneously using JQuery

The timer freezes briefly at 1:60 before switching to 1:01

Transform Loopback 4 filter into a SQL WHERE condition

The local storage gets wiped clean whenever I am using this.router.navigate

The default route in Angular is always preloaded and ready to be

How to manage UNC paths and "mapped network drives" within an Electron application?

The $.inArray() function returns a value of false or -1, despite the fact that the variable

What is the best way to retrieve the 'date,time' column from a MySQL database and use it as input for the google chart DateRangeFilter?