File Uploads and C:\fakepath\

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!!!
• hansem

  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. Martin

   This is good solution.

   http://www.w3.org/TR/html5/number-state.html#file-upload-state
9. Peeyush Chandel

   Thanks David. I also confused with it.
10. Jérémy D'Hasseler

    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！
11. Earl Fox

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

    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();
                    }
    
    				}
    
    
13. Noriel

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

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

    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.
16. 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;
17. Savin

    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);
  
18. Morton

    Hi Jérémy D’Hasseler

    you answer has solved my problem,Thanks!
19. John

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

    Thanks.
20. Lotfi

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

    Hi Savin !!! your code is working but its not working in mozilla firefox any other solution for firefox ?
22. 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 :::
23. 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
24. 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?