How can i read an object filelist array in javascript?

Question

I have created an array to store a list of selected files. Well, I have to be honest, I looked up the code and when I realized it worked for my purpose, I used it. Now I need to access this array in order to delete some files manually, but I have tried using the index of each sector, but this does not work.

This is how i create the array and store files.

 var files = [];
 $("button:first").on("click", function(e) {
                $("<input>").prop({
                    "type": "file",
                    "multiple": true
                }).on("change", function(e) {
                    files.push(this.files);
                }).trigger("click");

});

---

How could I read the array files[] if it contains an object fileList or obtain indexs from the array?

Solution 1

Here's how I understand your code:

Each time the first button in the dom is clicked a file input dialogue which accepts multiple files is generated. Upon return the dialogue emits a change event with a files variable (a FileList object) attached to the function context (this). Your code pushes the newly created FileList onto the files array. Since the input accepts multiple files each object pushed onto the files array is a FileList object.

So if you want to iterate through all elements in the files array you can put a function in the change event handler:

var files = [];
$("button:first").on("click", function(e) {
    $("<input>").prop({
        "type": "file",
        "multiple": true
    }).on("change", function(e) {
        files.push(this.files);
        iterateFiles(files);
    }).trigger("click");
});


function iterateFiles(filesArray)
{
    for(var i=0; i<filesArray.length; i++){
        for(var j=0; j<filesArray[i].length; j++){
            console.log(filesArray[i][j].name);
            // alternatively: console.log(filesArray[i].item(j).name);
        }
    }
}

In the iterateFiles() function I wrote filesArray[i][j] isn't really a multidimensional array -- but rather a single dimensional array containing FileList objects which behave very much like arrays...except that you can't delete/splice items out of them -- they are read-only.

For more info on why you can't delete see: How do I remove a file from the FileList

Solution 2

Since you are using jQuery you can use $.grep

files=$.grep( files, function(elementOfArray, indexInArray){
       /* evaluate by index*/
       return indexInArray != someValue;
       /* OR evaluate by element*/
       return  elementOfArray != someOtherValue;
});

API Reference: http://api.jquery.com/jQuery.grep/