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

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

File object

Browser support:

	3

Contains information about a file and provides access to its contents.

Note: The File object is supported in Firefox from version 3.

The File object is useful if you need information about a file that is selected with an input:file element. For example, when you need to check the file before upload.

Syntax:

Methods that return the object:

•	FileList.item (index)

The base interface, through which you can add new functionalities to the File object, is the File interface.

Possible members:

Properties:

fileName

Returns a string that identifies the name of the file. Deprecated in Firefox from version 3.6, use the name property instead.

This property is read-only.

fileSize

Returns an integer that specifies the size of the file in bytes. Deprecated in Firefox from version 3.6, use the size property instead.

This property is read-only.

mediaType

	3.6

Returns a string that identifies the MIME type of the file. Supported in Firefox from version 3.6.

This property is read-only.

name

	3.6

Returns a string that identifies the name of the file. Supported in Firefox from version 3.6.

This property is read-only.

size

	3.6

Returns an integer that specifies the size of the file in bytes. Supported in Firefox from version 3.6.

This property is read-only.

Methods:

getAsBinary ( )

Returns the contents of the file as a binary stream.

Return value:

String that contains the binary text.

getAsDataURL ( )

Returns the contents of the file as a base64 encoded text.

Return value:

String that contains the base64 encoded text.

getAsText (encoding)

Returns the contents of the file as a text in the specified encoding.

Parameters:

encoding

Required. String that specifies the name of the charset needs to be used to encode the contents of the file. For a list of character sets, please see the page for the character sets.

Return value:

String that contains the encoded text.

Example HTML code 1:

This example illustrates the use of the File object:

<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 getAsBinary, getAsDataURL and getAsText methods of the File object:

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

            if ('files' in fileInput) {
                if (fileInput.files.length > 0) {
                    var file = fileInput.files[0];

                    var data = file.getAsBinary ();
                    CreateInfo (data, 1);

                    var data = file.getAsDataURL ();
                    CreateInfo (data, 2);

                    var data = file.getAsText ('utf-8');
                    CreateInfo (data, 3);
                }
            }
            else {
                alert ("Your browser doesn't support the files property!");
            }
            
        }

        function CreateInfo (data, rowIdx) {
            var infoTable = document.getElementById ("info");
            var row = infoTable.rows[rowIdx];

            row.cells[1].innerHTML = data;
            row.cells[2].innerHTML = data.length;

            var txt = "";
            for (var i=0; i < data.length; i++) {
                txt += data.charCodeAt (i);
                if (i < data.length) {
                    txt +=  ", ";
                }
            }
            row.cells[3].innerHTML = txt;

        }
    </script>

</head>
<body onload="GetFileInfo ()">
    <p>
        Please download and save <a href="utf8.txt">this</a> 
        UTF-8 encoded spanish text file first.
    </p>

    Please select the downloaded text file:
    <input id="fileInput" type="file" size="50" onchange="GetFileInfo ()" />

    <br /><br />
    <table border="1px" id="info">
        <tbody>
            <tr>
                <th>function</th>
                <th>text</th>
                <th>length</th>
                <th>char codes</th>
            </tr>
            <tr>
                <td>getAsBinary ()</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>getAsDataURL ()</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>getAsText ()</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>