How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?

Question

How to get full path of file while selecting file using <input type=‘file’>

<input type="file" id="fileUpload">
<script type="text/javascript">
function getFilePath(){
     $('input[type=file]').change(function () {
         var filePath=$('#fileUpload').val(); 
     });
}
</script>

but the filePath var contains only name of selected file, not the full path.
I searched it on net, but it seems that for security reasons browsers (FF,chrome) just give name of file.
Is there any other way to get full path of selected file?

Eighteenth

#9463868 – Contumelious

See this for details – Clerestory

@nauphal thanks for comment but is there any other way to get full path of selected file? – Eighteenth

If you're in the case where you want to get the path of a file on the server, (for instance building a web interface to a commandline utility to be run on the server) you can always build the relative path, send it over as <option>s and use a tree widget or type ahead to let the user select it and then have the server process the file. – Rolanda

Possible duplicate of how to get full path from fileupload using Javascript – Pestilential

Answer 1

For security reasons browsers do not allow this, i.e. JavaScript in browser has no access to the File System, however using HTML5 File API, only Firefox provides a mozFullPath property, but if you try to get the value it returns an empty string:

$('input[type=file]').change(function () {
    console.log(this.files[0].mozFullPath);
});

https://jsfiddle.net/SCK5A/

So don't waste your time.

edit: If you need the file's path for reading a file you can use the FileReader API instead. Here is a related question on SO: Preview an image before it is uploaded.

Potpourri

See this link as it helped me with the same issue. – Accretion

... The title of the linked question is: Preview an image before it is uploaded. – Potpourri

And yet it got me the URL for the path to send to the server – Accretion

@AmirTugi That solution reads a file. It has nothing to do with the file's path on user's file system. – Potpourri

So how this website could do it? – Ducat

$('input[type="file"]').change(function (e) { var fileName = e.target.files[0].name; alert('The file "' + fileName + '" has been selected.'); console.log(e.target.value); }); – Enthetic

Is there any update on this (if it's doable now)? Is there any (hacky) workaround to get file's absolute path? – Cheung

@DarrenChristopher Why do you need the absolute path? – Potpourri

@undefined I have a server script running on local machine which will only be used in client from the same machine as for now, so it might be silly to do file transfer from and to the same machine. Plus, the data could be huge, which file transfer over the network is not really feasible. – Cheung

Answer 2

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.

Clew

Is there a way to do this with other file types: pdf, docx, etc. and instead of the image so show an Icon? For my uses I want to store the files on the page before I send them giving the user a chance to add a comment to up load with it like a message with a text. – Kaneshakang

Do I only need to put the content of "tmppath" in the browser address bar? I tried and it doesn't work. – Kure

@GangsarSwaPurba Unfortunately, it doesn't work in IE9 - see URL.createObjectURL(). – Maple

@naXa good, i will edit my comment above. uw, unfurtunately i can't edit my comment – Daynadays

In the 3rd line you should use tmppath variable instead of URL.createObjectURL(event.target.files[0]), this's more optimized. – Shel

From MDN: "Each time you call createObjectURL(), a new object URL is created, even if you've already created one for the same object. Each of these must be released by calling URL.revokeObjectURL() when you no longer need them.". So use it once and revoke when no longer required. – Salba

Answer 3

You cannot do so - the browser will not allow this because of security concerns.

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.

And other

You missed ); this at the end of the change event function.

Also do not create function for change event instead just use it as below,

<script type="text/javascript">

    $(function()
    {
        $('#fileUpload').on('change',function ()
        {
            var filePath = $(this).val();
            console.log(filePath);
        });
    });

</script>

Mann

Tried your code but its giving me wrong path. my file is in D directory but the value is coming C:\fakepath\test.xls – Oddfellow

C:\fakepath\fileName.xls ... anyone knows how to solve this? – Shanleigh

That's the whole point of this question, guys: It will never ever show the actual path and will always put C:\fakepath\ – Increscent

Answer 4

You can't. Security stops you for knowing anything about the filing system of the client computer - it may not even have one! It could be a MAC, a PC, a Tablet or an internet enabled fridge - you don't know, can't know and won't know. And letting you have the full path could give you some information about the client - particularly if it is a network drive for example.

In fact you can get it under particular conditions, but it requires an ActiveX control, and will not work in 99.99% of circumstances.

You can't use it to restore the file to the original location anyway (as you have absolutely no control over where downloads are stored, or even if they are stored) so in practice it is not a lot of use to you anyway.

Tuckerbag

Answer 5

You can use the following code to get a working local URL for the uploaded file:

<script type="text/javascript">    
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log('path', path);
</script>

Doggery

Answer 6

Did you mean this?

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

Tadio

this does not give path to the file. Why upvoted so many times? – Epiphytotic

Answer 7

One interesting note: although this isn't available in on the web, if you're using JS in Electron then you can do this.

Using the standard HTML5 file input, you'll receive an extra path property on selected files, containing the real file path.

Full docs here: https://github.com/electron/electron/blob/master/docs/api/file-object.md

Galloway

Answer 8

you should never do so... and I think trying it in latest browsers is useless(from what I know)... all latest browsers on the other hand, will not allow this...

some other links that you can go through, to find a workaround like getting the value serverside, but not in clientside(javascript)

Full path from file input using jQuery
How to get the file path from HTML input form in Firefox 3

Describe

Answer 9

You can, if uploading an entire folder is an option for you

<input type="file" webkitdirectory directory multiple/>

change event will contain:

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"

but it doesn't contain the whole absolute path, only the relative one. Supported in Firefox also.

Tenure

Answer 10

This is a working solution for me

const path = (window.URL || window.webkitURL).createObjectURL(file);

It will return a blob URL to locally access the file.

Grouse

Answer 11

file element has and array call files it contain all necessary stuff you need

var file = document.getElementById("upload");

file.addEventListener("change", function() {
    for (var i = 0; i < file.files.length; i++) {
        console.log(file.files[i].name);
    }
}, false);

Tabbie

It doesn't provide the full path of the uploaded file. – Barnaba

Answer 12

One could use the FileReader API for changing the src of an img element.

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

Phosphatase

Answer 13

You can get the full path of the selected file to upload only by IE11 and MS Edge.

var fullPath = Request.Form.Files["myFile"].FileName;

Jeromejeromy

Answer 14

$('input[type=file]').change(function () {
    console.log(this.files[0].path);
});

This is the correct form.

Informative

This doesn't seem to work in Chrome? There is no path attribute for the File object? – Labellum

oh, in Chrome is working... please just add line: console.log(this.files[0]) to see all atributtes – Informative