Search code examples
javascriptfile-uploadfilelist

What is items and length in FileList in javascript

i have a small app that upload a file:

<html>
<script type="text/javascript">
 var upload = function(){
    alert(document.getElementById('up_file').files[length]);
 };
</script>   
<body>

<input type='file' id='up_file'   />
<input type='button' value='Submit' onclick="upload();" />
    <p id="p"></p>

</body></html>

(very short)

please go on and copy and past this in your code editor and then open in google. after you have opened this in your google browser then open its developer tool and write this in its console

document.getElementById('up_file').files

then it returns

FileList{0:File, Length:1, item:function} (please expand this object)

Now when we have to upload a file and want to get the name of that file then we have to write the codedocument.getElementById('up_file').files[0].name then it returns the file name says flower.jpg

Case 1

when you have expanded the object FileList you have noticed that there is an property name length. Now when you type document.getElementById('up_file').files[length] then it should return 1 because when you had expanded FileList object you have seen their the property length is 1 but unexpectedly when we write document.getElementById('up_file').files[length] it returns another object then 1 ! that object is:

File {webkitRelativePath: "", lastModifiedDate: Fri Aug 30 2013 13:42:08 GMT+0530 (India Standard Time), name: "Creek.jpg", type: "image/jpeg", size: 264409…}

and if we write document.getElementById('up_file').files[length].name it returns the same thing which is returned by document.getElementById('up_file').files[0].name that is the name of that file!

Question:

1) why do javascript returns an object insted of the length of the number of the files when we writedocument.getElementById('up_file').files[length]?

Case2

in that FileList object there is another property name item before you have expanded it but when you expand FileList object there is no property there with the name of item but when you further go on expanding the FileList object then you can see that item(may be this is a constrocter, may be, i am not sure, 50%).

see, typeof __proto__ is a object then item can be accessed by by using dot(.) nation but it always returned undefined when i write __proto__.item. i am not going to further explain because i am going out of my point...

Question:

1) What is this Item?

2} how to get the properties of __proto__ object?

well actually i so much confused and when i searched on internet then i get more puzzled! You may dislike this question because it is... you know a bit confusing

Thanks for all your answers.

Solution

  • document.getElementById('up_file').files[length]

    this problem is with accessing property of files.

    There are two ways of accessing property of an object in JS.

    [] array type notation - either define the index using a literal string or a variable containing the string.

    files['length']

    or

    var lengthProp = 'length';
files[lengthProp]

    . notation -
    simply access property with dot
    files.length

    1) the reason its returning object is because files is an Array. and the index length (javascript is reading it as a variable which is undefined) is actually undefined. for undefined index of an array browser is returning first item in the Array. which is the first File Object.

    2) by expansion i think you mean viewing the object in console. __proto__ property is actually accessor to prototype of the object. for files object the prototype is undefined. which the console displays as __proto__ to the constructor. in JS its actually undefined