In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > objects > FileList

FileList collection

Browser support:

	3

Represents a collection of File objects.

Note: The FileList collection is supported in Firefox from version 3.

The FileList collection is useful if you want to access to the files that are selected with an input:file element or that are being dropped during a drag-and-drop operation. Each file is represented by a File object of the FileList collection. With the File object, you can get the name, size and the contents of a file. For example, it can be useful, if you want to check the files before upload or drop.

Syntax:

Properties that reference the object:

•	dataTransfer.files
•	input:file.files

Possible members:

Properties:

length

Returns an integer that specifies the number of objects in the current collection.

This property is read-only.

Methods:

[index]

Returns an object from the current collection by index.

Parameters:

index

Required. Zero-based integer that specifies the position of the object to retrieve.

Return value:

Returns the File object at the specified position.

item (index)

Returns an object from the current collection by index.

Parameters:

index

Required. Zero-based integer that specifies the position of the object to retrieve.

Return value:

Returns the File object at the specified position.

Example HTML code 1:

This example illustrates the use of the FileList collection for input:file elements:

<head>
    <script type="text/javascript">
        function GetFileInfo () {
            var fileInput = document.getElementById ("fileInput");

            var message = "";
            if ('files' in fileInput) {
                if (fileInput.files.length == 0) {
                    message = "Please browse for one or more files.";
                } else {
                    for (var i = 0; i < fileInput.files.length; i++) {
                        message += "<br /><b>" + (i+1) + ". file</b><br />";
                        var file = fileInput.files[i];
                        if ('name' in file) {
                            message += "name: " + file.name + "<br />";
                        }
                        else {
                            message += "name: " + file.fileName + "<br />";
                        }
                        if ('size' in file) {
                            message += "size: " + file.size + " bytes <br />";
                        }
                        else {
                            message += "size: " + file.fileSize + " bytes <br />";
                        }
                        if ('mediaType' in file) {
                            message += "type: " + file.mediaType + "<br />";
                        }
                    }
                }
            } 
            else {
                if (fileInput.value == "") {
                    message += "Please browse for one or more files.";
                    message += "<br />Use the Control or Shift key for multiple selection.";
                }
                else {
                    message += "Your browser doesn't support the files property!";
                    message += "<br />The path of the selected file: " + fileInput.value;
                }
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetFileInfo ()">
    <input type="file" id="fileInput" multiple="multiple" size="60" onchange="GetFileInfo ()" />
    <div id="info" style="margin-top:30px"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the FileList collection for drag-and-drop operations:

<head>
    <script type="text/javascript">
        function OnDropBody (event) {
            alert ("Please drop the files into the textarea.");
            return false;
        }

        function OnDropTextarea (event) {
            if (event.dataTransfer) {
                if (event.dataTransfer.files) {
                    var target = document.getElementById ("target");
                    target.value = "";
                    for (var i = 0; i < event.dataTransfer.files.length; i++) {
                        var file = event.dataTransfer.files[i];
                        if ('name' in file) {
                            var fileName = file.name;
                        }
                        else {
                            var fileName = file.fileName;
                        }
                        if ('size' in file) {
                            var fileSize = file.size;
                        }
                        else {
                            var fileSize = file.fileSize;
                        }

                        target.value += (i+1) + ". file -- name: " + fileName + ", size: " + fileSize + " bytes\n";
                    }
                }
                else {
                    alert ("Your browser does not support the files property.");
                }
            }
            else {
                alert ("Your browser does not support the dataTransfer property.");
            }
            if (event.stopPropagation) {
                event.stopPropagation ();
            }
            else {
                event.cancelBubble = true;
            }
            return false;
        }
    </script>
</head>
<body ondragenter="return false;" ondragover="return false;" ondrop="return OnDropBody (event);">
    Please drag some files into this browser window and drop them in the following field:<br />
    <textarea id="target" rows="5" cols="50" spellcheck="false" 
        ondragenter="return false;" ondragover="return false;" 
        ondrop="return OnDropTextarea (event);">
    </textarea>
    <br /><br />
    In Safari, please drag some text within this browser window first and drag files next.
</body>