The c:\fakepath mystery

Fri, 16 Dec 2011

Yet another way Internet Explorer 8+ may break your code

When implementing file uploads on a website, it's often a good idea to write some JavaScript code to check the name of the file being uploaded. Perhaps you don't want to allow diacritics in the filename, which can wreak havoc when downloading documents using different browsers. Or perhaps you want to check the length of the filename. Whatever the case may be, you'll be in for a surprise when using Internet Explorer 8 or above.

Under normal circumstances (i.e. Firefox, Chrome etc.) the value of the input control for file uploads is the file's base name, without any directory. So if c:\My Documents\Alex\MyFile.pdf was uploaded, then the input's value will be MyFile.pdf. Not so with Internet Explorer. The input value will be c:\fakepath\MyFile.pdf.

Why? Because Microsoft wants to include the file path for us, but isn't allowed to. The HTML 5 specification stipulates that JavaScript may not have access to the path of a local file. Which is why using Firefox and Chrome, we only get the file's base name to play with. Microsoft chose to show that, yes, there's a path, but we can't give it to you. So take fakepath. This doesn't seem overly useful to me.

Execute this code to see the value of the file input box in your browser:

When checking the validity of a file name, you'll need to strip off the fakepath first. Here's some JavaScript to do just that: