The Mystery of c:fakepath Unveiled

Have you tried to manipulate the string that is returned by the value attribute of a file upload input (<input type="file" />) under Internet Explorer 8? Did you get the strange c:fakepath string? Relax – there is nothing wrong with your code, and although this is quite confusing, it has its justifiable reasons. Here is a screenshot of a file input control manipulated with JavaScript:

FakePath

According to the specifications of HTML5, a file upload control should not reveal the real local path to the file you have selected, if you manipulate its value string with JavaScript. Instead, the string that is returned by the script, which handles the file information is c:fakepath.

This requirement is already implemented in Internet Explorer 8 – the real path to the file will be shown only if the page that contains the control is added to the trusted sites collection of the browser.

Below is some code to play with. Notice that this will not work on localhost pages. The page should be uploaded on a production server.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>Testing the FakePath String</title>
</head>
<body>
<form id="Form1" action="" method="post">
<input type="file" /><input type="button" onclick="alert(this.previousSibling.value);" value="select file and press the button" />
</form>
</body>
</html>

More Cool Stuff