File Uploads and C:\fakepath\
I was recently working on a project that required providing an AJAX uploading widget to users. I decided to use Dojo's dojox.form.FileInput widget so the "Upload" button would look just like every other button within the web application. Everything worked great until I tested the widget in Chrome and found that the value of the input node was being set to C:\fakepath\{Original File Name}. I then checked Internet Explorer and Safari; both of them were prepending "C:\fakepath" to the file name. WTF?!
After doing some research, I found this blog post, which explained:
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.
That made sense; essentially the browser is feeding that lame C:\fakepath\ text in. Luckily all I needed to do was fix the issue by doing a simple string replace call:
// Change the node's value by removing the fake path
inputNode.value = fileInput.value.replace("C:\\fakepath\\", "");
Whew -- dodged a bullet there. Just wanted to post this for everyone in case you run into it in the future.
I was always wondering whether the file-upload field is a security problem in general. couldn’t a you theoretically get any file from the client’s computer by manipulating the form-field’s value? But I’ve been too lazy to verify this…
Came across this exact same thing about a day before this post! Confused me at first too :)
document.getElementById("fileInput").files[0].fileName;
this returns the real filename without the ‘C:\fakepath\’.
this also works for:
document.getElementById("fileInput").files[0].fileSize;
this returns the filesize in bytes ;)
Martinjn,
Could you help me? With your code the “C\fakepath” don’t show anymore. But the file update is name on BD but won’t upload.
<input id="fakeupload" name="fakeupload[]" class="inputfile fakeupload" type="text" />
<input id="path" name="path[]" class="inputfile realupload" type="file" value="" onchange="javascript:document.getElementById('fakeupload').value = document.getElementById('path')value;" />
Hi there, could you help me with how to implement this on a form what has the input file?
// Change the node’s value by removing the fake path
inputNode.value = fileInput.value.replace(“C:\\fakepath\\”, “”);
I get confuse. Thanks.
How do I use the
.files[0].fileSizein the code below?<input id="fakeupload" name="fakeupload[]" class="inputfile fakeupload" type="text" />
<input id="path" name="path[]" class="inputfile realupload" type="file" value="" onchange="javascript:document.getElementById('fakeupload').value = document.getElementById('path').value;" />
Tks!
document.getElementById(“fileInput”).files[0].fileName;
does not work but
document.getElementById(“fileInput”).files[0].name;
Works!
There is no need to use this
inputNode.value = fileInput.value.replace(“C:\\fakepath\\”, “”);
to replace the fakepath with empty string
as it may not work on all machines! as the path may be machine specific.
Instead use this document.getElementById(“fileInput”).files[0].name; to get the file name with out any extra string attached in the beginning. it will return only the file name.
In my case i used $(“#uploadFile”)[0].files[0].name and it worked on html5 enabled safari browser as well!
thank dude
this document.getElementById(“fileInput”).files[0].name; works great!!!
I’ve tried using javascript:
inputNode.value = newValue;jQuery (change event on file input element):
$(this).attr("value", newValue);In the latest firefox and chrome, both throw a security error and refuse to display the new value (ie, replace the fakepath crap).
Is there a way to change the display to get rid of fakepath that actually works?
This is good solution.
http://www.w3.org/TR/html5/number-state.html#file-upload-state
Thanks David. I also confused with it.
Hello,
I use the object FileReader on the input onchange event the your input file type !
ex :
var input = document.getElementById(“inputFile”);
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
var img = document.getElementById(“yourImgTag”);
img.src = event.target.result;
}