File Uploads and C:\fakepath\

By  on  

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.

Recent Features

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

Incredible Demos

  • By
    CSS Selection Styling

    The goal of CSS is to allow styling of content and structure within a web page.  We all know that, right?  As CSS revisions arrive, we're provided more opportunity to control.  One of the little known styling option available within the browser is text selection styling.

  • By
    Sexy Link Transformations with CSS

    I was recently visiting MooTools Developer Christoph Pojer's website and noticed a sexy link hover effect:  when you hover the link, the the link animates and tilts to the left or the right.  To enhance the effect, the background color of the link is...

Discussion

  1. fishbone

    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…

  2. Martin

    Came across this exact same thing about a day before this post! Confused me at first too :)

  3. Martijn
    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 ;)

    • Goulart

      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;" />
      
  4. Arnold

    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.

  5. Goulart

    How do I use the .files[0].fileSize in 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;" />
    
  6. genius
    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!

    • ranggadablues

      thank dude! document.getElementById("fileInput").files[0].name; works great!!!

    • yes this work for 1 image, for example :

      var a = document.getElementById("fileInput1").files[0].name;
      var b = document.getElementById("fileInput2").files[0].name;
      

      var b not work !!!

  7. Scott

    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?

  8. Thanks David. I also confused with it.

  9. Hello,

    I use the object FileReader on the input onchange event the your input file type !

    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;
    }
    
    • Dante

      Nice!That is the correct solution!

  10. Don’t really care about what it shows, main thing is functionality

  11. Hi,

    I was trying to follow up an exercise in the book “Developing Backbone.js Applications”.
    Your post helped me out with image path turned into C:\\fakepath\\.

    This is what I did.

    } else if ( el.id === 'coverImage' ){
    
    					formData[ el.id ] = $( el ).val().replace("C:\\fakepath\\", "../img/");
    					console.log( formData[ el.id ] );
    
    
    				} else {
    					formData[ el.id ] = $( el ).val();
                    }
    
    				}
    
    
  12. Noriel

    Good thing I found this blog! I was freaking worried about that.. lol

  13. Christopher Jimenez

    in Version 31.0.1650.57 this
    document.getElementById(“fileInput”).files[0].fileName;
    changes to
    document.getElementById(“fileInput”).files[0].name;

  14. Thanks you very much, that solved my problem…. :)
    the results of my javascript on page :

    document.getElementById("archivo").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
    document.getElementById("uploadfile").files[0].fileName;
    

    i dont know if theres something repeated but it worked.

  15. Josh

    if there are multiupload, it’s works well

    $("input[name='attach']").each(function(){
    	var files = $(this).val();
    	var tmpArray = files.split("\\");
    	files = tmpArray[tmpArray.length-1];   //get the last item in tmpArray 
    });
    
    • Vinod
      document.getElementById("uploadFile").value = this.value;
  16. Hi
    May be I make something wrong but this way remove all text from input.
    So I’ve solved “fakepath problem” by

    document.getElementById("uploadFile").value = this.value.substring(12);

    • JackWebb

      The best answer is the simplest one.. Thank You Savin!

      document.getElementById("uploadFile").value = this.value.substring(12);
      
  17. Morton

    Hi Jérémy D’Hasseler

    you answer has solved my problem,Thanks!

  18. John

    Please, how do I fix this, where do I enter this code to fix the fakepath issue.

    Thanks.

  19. Lotfi

    document.getElementById("fileInput").files[0].name; works

  20. Atul

    Hi Savin !!! your code is working but its not working in mozilla firefox any other solution for firefox ?

  21. Atul
    document.getElementById("fileInput").files[0].name;

    Hey !!! Any on can tell me how can this code working, I am using it so many times… Please Help :::

  22. Wolffox

    How it works in the Chrome?
    I use the document.getElementById("fileInput").files[0].name; int the Chrome, I just get the file name, but i want to get the full name like D:/xx/xx/xx.doc

  23. Syed Maisum Abbas Rizvi

    We get the file name but how can we move this file to a different directory since it only has filename and not the actual path. I am trying to send email with attachment but I get path errors due to this. Any solutions?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!