41

When I call val() on an input with type="file" I only get file name rather than full path. How can I get full path?

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
gruszczy
  • 40,948
  • 31
  • 128
  • 181
  • 1
    If you're creating a desktop application using HTML/CSS/JS you can use NW.js where the chrome/browser build implements the file chooser like a normal desktop file chooser giving you full path. see https://nwjs.readthedocs.io/en/latest/References/Changes%20to%20DOM/#fileitempath – Bob Apr 05 '20 at 01:28

2 Answers2

48

You can't: It's a security feature in all modern browsers.

For IE8, it's off by default, but can be reactivated using a security setting:

When a file is selected by using the input type=file object, the value of the value property depends on the value of the "Include local directory path when uploading files to a server" security setting for the security zone used to display the Web page containing the input object.

The fully qualified filename of the selected file is returned only when this setting is enabled. When the setting is disabled, Internet Explorer 8 replaces the local drive and directory path with the string C:\fakepath\ in order to prevent inappropriate information disclosure.

In all other current mainstream browsers I know of, it is also turned off. The file name is the best you can get.

More detailed info and good links in this question. It refers to getting the value server-side, but the issue is the same in JavaScript before the form's submission.

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • 8
    I can't get the path to the file using the browser? This is madness!! – gruszczy Aug 15 '10 at 20:45
  • 5
    @grusz Well, it depends on your viewpoint: It's none of the web site's business where the uploaded file comes from really. It's just painful when you want to store the original file location as a service for the user, I know.... Flash based upload components like uploadify or swfupload.org *may* have more liberties here. – Pekka Aug 15 '10 at 20:47
  • So this means, I can't copy value from one file input to another, because I never have the full path? – gruszczy Aug 15 '10 at 20:50
  • 6
    @grus you couldn't do that even if you knew the full path. You can't populate a file upload programmatically, also for security reasons. Otherwise, you could go and fetch `C:\Documents and Settings\Username\Top Secret Document.doc` from the visitor's computer without him noticing. – Pekka Aug 15 '10 at 20:50
  • 1
    Ok, seems I have to redesign now. Thanks a lot. – gruszczy Aug 15 '10 at 20:53
  • @gruszczy I think you're confusing client-side vs server-side. You can retrieve the full path of the file once it has been uploaded -- since the file is now yours and the path is known -- but you can't do that on the client-side since it's a security vulnerability. – bafromca Aug 09 '12 at 18:58
  • @Pekka웃: I have the same issue. How is it possible to upload the file, without the full filename path? – Sefran2 Sep 07 '13 at 18:38
  • @Cricket I don't know what you mean and which platform you are on – Pekka Sep 07 '13 at 18:42
  • sorry for bringing this up again..but is it possible for enabling it for intranet based applications? – fireholster Apr 02 '15 at 03:55
  • @fireholster I don't know about the current situation, you would have to look into each briwser and whether it has a setting to enable it, like IE8 did. There doesn't appear to be a way for all browsers at once. – Pekka Apr 02 '15 at 08:04
16

Well, getting full path is not possible but we can have a temporary path.

Try This:

It'll give you a temporary path not the accurate path, you can use this script if you want to show selected images as in this jsfiddle example(Try it by selectng images as well as other files):-

JSFIDDLE

Here is the code :-

HTML:-

<input type="file" id="i_file" value=""> 
<input type="button" id="i_submit" value="Submit">
    <br>
<img src="" width="200" style="display:none;" />
        <br>
<div id="disp_tmp_path"></div>

JS:-

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));

    $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
});

Its not exactly what you were looking for, but may be it can help you somewhere.

DWX
  • 2,282
  • 1
  • 14
  • 15