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

You are here: Reference > JavaScript > client-side > event handling > properties > files (dataTransfer)

files property (dataTransfer)

Browser support:

	3.6		5

Returns a FileList collection that represents the dropped files during the current drag-and-drop operation.

Note: The files property is supported in Firefox from version 3.6 and in Safari from version 5. Although the files property is supported in Safari 4, it always returns null.

The files property is only relevant for the ondrop event. Through the returned FileList collection, you can get the name, size and the contents of the files. For further details, please see the example below and the page for the FileList collection.

Syntax:

object.files;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

A FileList collection that represents the dropped files.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the files property:

<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>