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?

Community · Accepted Answer · 2017-05-23 12:08:49Z

4

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

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Feb 12, 2013 at 3:59

Jacob Dalton

1,70314 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leo Over a year ago

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.

John Christian De Chavez Over a year ago

@MichaelVidal how did you do it. ive been searching for that kind of solution but i cant make it. please help me

charlietfl · Accepted Answer · 2013-02-12 03:05:12Z

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, 2013 at 3:05

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

Pysis Over a year ago

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!

charlietfl Over a year ago

@Pysis can use [].some.call() on a Filelist or other array like object

Aeolun · Accepted Answer · 2013-02-12 02:06:25Z

0

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

answered Feb 12, 2013 at 2:06

Aeolun

7568 silver badges15 bronze badges

Collectives™ on Stack Overflow

How can i read an object filelist array in javascript?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related