How to resolve the C:\fakepath?

How to resolve the C:\fakepath?

This is my upload button.

This is the text field where I have to show the full path of the file.
function theimage(){
var filename = document.getElementById(‘file-id’).value;
document.getElementById(‘file-path’).value = filename;
alert(filename);
}

This is the JavaScript which solve my problem. But in the alert value gives me
C:\fakepath\test.csv

and Mozilla gives me:
test.csv

But I want the local fully qualified file path. How to resolve this issue?
If this is due to browser security issue then what should be the alternate way to do this?

Solutions/Answers:

Solution 1:

Some browsers have a security feature that prevents JavaScript from knowing your file’s local full path. It makes sense – as a client, you don’t want the server to know your local machine’s filesystem. It would be nice if all browsers did this.

Solution 2:

Use

document.getElementById("file-id").files[0].name; 

instead of

document.getElementById('file-id').value

Solution 3:

If you go to Internet Explorer, Tools, Internet Option, Security, Custom, find the “Include local directory path When uploading files to a server” (it is quite a ways down) and click on “Enable” . This will work

Related:  How to add target=“_blank” to JavaScript window.location?

Solution 4:

I use the object FileReader on the input onchange event for your input file type! This example uses the readAsDataURL function and for that reason you should have an tag. The FileReader object also has readAsBinaryString to get the binary data, which can later be used to create the same file on your server

Example:

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

Solution 5:

I am happy that browsers care to save us from intrusive scripts and the like. I am not happy with IE putting something into the browser that makes a simple style-fix look like a hack-attack!

I’ve used a < span > to represent the file-input so that I could apply appropriate styling to the < div > instead of the < input > (once again, because of IE). Now due to this IE want’s to show the User a path with a value that’s just guaranteed to put them on guard and in the very least apprehensive (if not totally scare them off?!)… MORE IE-CRAP!

Related:  Why is jQuery.ready recommended when it’s so slow?

Anyhow, thanks to to those who posted the explanation here: IE Browser Security: Appending “fakepath” to file path in input[type=”file”], I’ve put together a minor fixer-upper…

The code below does two things – it fixes a lte IE8 bug where the onChange event doesn’t fire until the upload field’s onBlur and it updates an element with a cleaned filepath that won’t scare the User.

// self-calling lambda to for jQuery shorthand "$" namespace
(function($){
    // document onReady wrapper
    $().ready(function(){
        // check for the nefarious IE
        if($.browser.msie) {
            // capture the file input fields
            var fileInput = $('input[type="file"]');
            // add presentational <span> tags "underneath" all file input fields for styling
            fileInput.after(
                $(document.createElement('span')).addClass('file-underlay')
            );
            // bind onClick to get the file-path and update the style <div>
            fileInput.click(function(){
                // need to capture $(this) because setTimeout() is on the
                // Window keyword 'this' changes context in it
                var fileContext = $(this);
                // capture the timer as well as set setTimeout()
                // we use setTimeout() because IE pauses timers when a file dialog opens
                // in this manner we give ourselves a "pseudo-onChange" handler
                var ieBugTimeout = setTimeout(function(){
                    // set vars
                    var filePath     = fileContext.val(),
                        fileUnderlay = fileContext.siblings('.file-underlay');
                    // check for IE's lovely security speil
                    if(filePath.match(/fakepath/)) {
                        // update the file-path text using case-insensitive regex
                        filePath = filePath.replace(/C:\\fakepath\\/i, '');
                    }
                    // update the text in the file-underlay <span>
                    fileUnderlay.text(filePath);
                    // clear the timer var
                    clearTimeout(ieBugTimeout);
                }, 10);
            });
        }
    });
})(jQuery);

Solution 6:

I came accross the same problem. In IE8 it could be worked-around by creating a hidden input after the file input control. The fill this with the value of it’s previous sibling. In IE9 this has been fixed aswell.

Related:  Accessing Redux state in an action creator?

My reason in wanting to get to know the full path was to create an javascript image preview before uploading. Now I have to upload the file to create a preview of the selected image.