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?

score 4 · Accepted Answer · edited May 23 '17 at 12:08

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

Let me tell you: "Someday, I'd like to be half as good as you are in programming." Yes, I say it sincerely. After reading this, I learned that the filelist object are read-only, so I had to re-think how to send extra data. So, I create two more arrays: one containing the indexs of files and another, which contains the files that the user wants to remove. I send both data together with objectFilelist THROUGH ajax, and using a php file, I do all the magic. This was a painful, however, it could be performed. Many thanks to you. — Leo, Feb 13 '13 at 03:40
@MichaelVidal how did you do it. ive been searching for that kind of solution but i cant make it. please help me — John Christian De Chavez, Apr 27 '15 at 05:34

score 2 · Answer 2 · answered Feb 12 '13 at 03:05

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/

answered Feb 12 '13 at 03:05

charlietfl

170,828
13
121
150

I wanted to use `Array.prototype.some` on a `FileList` object, but it's not an array. I guess I could try to convert it, but this `grep` solution paired with my `....length > 0` addition gave me a nice boolean to work with. Didn't see this function in the API at a glance, so thanks! – Pysis Nov 16 '17 at 21:26
@Pysis can use `[].some.call()` on a Filelist or other array like object – charlietfl Nov 16 '17 at 21:40

score 0 · Answer 3 · answered Feb 12 '13 at 02:06

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

How can i read an object filelist array in javascript?

3 Answers3