CODEWITHSUNDEEP
javascriptjqueryarrayshtmlarraylist
Leo
Leo

Reputation: 1231

How can i read an object filelist array in javascript?

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?

Upvotes: 4

Views: 32414

Answers (3)

Jacob Dalton
Jacob Dalton

Reputation: 1693

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

Upvotes: 4

charlietfl
charlietfl

Reputation: 171679

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/

Upvotes: 2

Aeolun
Aeolun

Reputation: 756

Something like this?

for(var i = 0; i < files.length; i++) {
   alert(files[i][0].name);
   if (files[i][0].name == 'file.jpg') {
      files.splice(i, 1) //remove the item
   }
}

That is, there is always one file in each FileList due to the way you select it. So for each filelist you are only interested in the first file in it. For each file you can just get the properties as defined here: http://help.dottoro.com/ljbnqsqf.php

Upvotes: 0

Related Questions