Input Type File Add File Path To A Span

Question

I customized my input type="file" just like Facebook upload instead of textbox and a button(default input type="file") I make my input file a button only without the textbox where you can see the path of the file. I'am planning to add a span or a p tag next to my customized input file to show the path of the file.

How can I print the file path to my span tag when I choose a file?

html code

<!doctype>
<html>
<head>
</head>

<body>

<div class="browse-wrap">
    <div class="title">Choose a file to upload</div>
    <input type="file" name="upload" class="upload" title="Choose a file to upload">
</div>
<span class="upload-path"></span>

</body>
</html>

css code

div.browse-wrap {
        top:0;
        left:0;
        margin:20px;
        cursor:pointer;
        overflow:hidden;
        padding:20px 60px;
        text-align:center;
        position:relative;
        background-color:#f6f7f8;
        border:solid 1px #d2d2d7;}
    div.title {
        color:#3b5998;
        font-size:14px;
        font-weight:bold;
        font-family:tahoma, arial, sans-serif;}
    input.upload {
        right:0;
        margin:0;
        bottom:0;
        padding:0;
        opacity:0;
        height:300px;
        outline:none;
        cursor:inherit;
        position:absolute;
        font-size:1000px !important;}
    span.upload-path {
        margin:20px;
        display:block;}

Thanks!

Correction: no browser except IE. See related http://stackoverflow.com/a/2200120/1331430 — Fabrício Matté, Dec 01 '13 at 06:42

Roko C. Buljan · Accepted Answer · 2013-12-01T07:04:01.020

6

DEMO

$('input[type="file"]').change(function(){
  $(this).closest('.browse-wrap').next('.upload-path').text(this.value);
});

Demo: get rid of C:\fakepath\ in Chrome

Or using the HTML5 file API

DEMO

$('input[type="file"]').change(function(){

  var f = this.files[0];  
  var name = f.name;

  $(this).closest('.browse-wrap').next('.upload-path').text(name);

});

edited Dec 01 '13 at 07:04

answered Dec 01 '13 at 06:40

Roko C. Buljan

196,159
39
305
313

1

Who minus this answer? Why? – Christopher Rioja Dec 01 '13 at 06:43
1

@ChristopherRioja Because 1. read my comment in the question. 2. This does not work reliably cross-browser. – Fabrício Matté Dec 01 '13 at 06:44
@Roko have you tested this in which browsers? Both of your code samples fail miserably in Chrome (First one pointing to `C:/fakepath` and second one containing only file name). – Fabrício Matté Dec 01 '13 at 06:46
@FabrícioMatté `FF`. True but, well, you can always get rid of the ugly `C:\fakepath\` with a bit of string manipulation. – Roko C. Buljan Dec 01 '13 at 06:49
Interesting, but I'm getting only the file name under Firefox Nightly. I believe OP wants the full path name. – Fabrício Matté Dec 01 '13 at 06:51
Removed dv, though future readers should consider the [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/File#Browser_compatibility) before using the File API. – Fabrício Matté Dec 01 '13 at 07:09
@FabrícioMatté exactly! As I already stated in my A. : `HTML5`. Which implies still in 2013 as possible *draft* for some browsers. Thanks for the note btw! – Roko C. Buljan Dec 01 '13 at 07:13

score 1 · Answer 2 · edited May 23 '17 at 10:30

It is currently impossible to get the full path name in an user's computer in updated browsers. Quoting this answer:

[...] That the full file path is being sent in MSIE and other ancient webbrowsers is due to a security bug. The W3 and RFC2388 specifications have never mentioned to include the full file path. Only the file name. Firefox is doing its job correctly.

Think about privacy for a moment: would you like sites collecting (part of) your file system structure as a side-effect for every file you upload?

The filename is, most often, enough to indicate to the user which files s/he has selected, henceforth it should suffice for your use case.

Accessing a file input's value property in the current stable Chrome release gives C:\fakepath\realfilename.ext while Firefox gives realfilename.ext. You can normalize it to only the file name this way:

$('input[type="file"]').change(function(){
    var filename = this.value.match(/[^\\\/]+$/, '')[0];
    alert(filename);
});

Demo

@ChristopherRioja Oh I'll make a hack to normalize that behavior, sec `=]` — Fabrício Matté, Dec 01 '13 at 06:55

score 1 · Answer 3 · answered Dec 01 '13 at 07:24

I think OP is referring to the filename which is normally found next to the default file button. As per stated by @fabricio-matte it is not possible to access file path from browsers due to security restrictions. Nonetheless, back to my first assumption, I think the solution is simply combining a little bit of JavaScript just to detect changes in the input and set the corresponding span with the default text used by the default browser's button, so let's put all pieces together:

OP HTML

<div class="browse-wrap">
    <div class="title">Choose a file to upload</div>
    <input type="file" name="upload" class="upload" title="Choose a file to upload">
</div>
<span class="upload-path"></span>

OP CSS with some improvements

div.browse-wrap {
        top:0;
        left:0;
        margin:20px;
        cursor:pointer;
        overflow:hidden;
        padding:20px 60px;
        text-align:center;
        position:relative;
        background-color:#f6f7f8;
        border:solid 1px #d2d2d7;}
    div.title {
        color:#3b5998;
        font-size:14px;
        font-weight:bold;
        font-family:tahoma, arial, sans-serif;}
    input.upload {
        right:0;
        margin:0;
        bottom:0;
        padding:0;
        opacity:0;
        height:300px;
        outline:none;
        cursor:inherit;
        position:absolute;
        font-size:1000px !important;}
    span.upload-path {
        text-align: center;
        margin:20px;
        display:block;
        font-size: 80%;
        color:#3b5998;
        font-weight:bold;
        font-family:tahoma, arial, sans-serif;
}

JavaScript to Detect Input Changes

// Span
var span = document.getElementsByClassName('upload-path');
// Button
var uploader = document.getElementsByName('upload');
// On change
for( item in uploader ) {
  // Detect changes
  uploader[item].onchange = function() {
    // Echo filename in span
    span[0].innerHTML = this.files[0].name;
  }
}

CodePen Demo: http://codepen.io/anon/pen/isJqx

That way, you make sure the span gets updated every time the user has changed the file, no security restrictions broken, no need for paths, because anyway there were never paths shown in the first place.

score 0 · Answer 4 · answered Mar 31 '17 at 14:59

    .custom{
    position: relative;
    z-index: 1;
    border: 1px solid #ccc;
    cursor:pointer;
    width: 30%;
    height: 30px;
}

.custom::after{
    content: "Upload";
    position: absolute;
    right: 0px;
    background-color: rgba(51, 122, 183, 1);
    height: 65%;
    padding: 5px 10px;
    color: #fff;
    display: block;
    font-size: 18px;
    width: 50px;
    text-align: center;
    top: 0;

}

.custom .file-text{
    display: block;
    position: absolute;
    padding: 2px 20px;
    color: #f00;
    font-weight: bold;
    font-size: 20px;
}

.custom .file{
     display: inline;
     width: 100%;
     height: 100%;
     z-index: 9999;
     opacity: 0;
     cursor: pointer;
     padding: 0;
     position: relative;
}

You must call a library jquery before code
    $(function () {
        $('.custom input[type="file"]').on("change", function() {

            $('.custom .file-text').text($(this).val());

        });
    });

    <!DOCTYPE html>
    <html>
       <head>
        </head>
       <body>
          <div class="custom">
             <span class="file-text">chosse file</span>
             <input type="file" class="file"></input>
          </div>
       </body>
    </html>

This does not provide an answer to the question. Once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](http://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/low-quality-posts/15704628) — Karmic Coder, Mar 31 '17 at 18:36
He wants to print the path of the file on Span ... he can print the path on the span only in the name of the class $('.custom .file-text') to $('.upload-path') only..... — issa sofer, Apr 01 '17 at 08:40

Input Type File Add File Path To A Span

4 Answers4