Question

I am using a hack to make the file input appear consistent across all browsers. I am using this technique. Basically, you set the opacity of the file upload input to 0, and absolutely position it above another input that is styled (for cross browser consistency). When the user clicks on the “File Upload” area they are really clicking the input below it, but because the opacity of the upload area is zero, it still triggers the upload dialog box. This hack works very well (read more in the link), however, there is one main issue: Because the opacity is set to 0, you dont see the file path, which is necessary to let the user know that the browse button worked.

I am looking for a jquery solution that does the following: When a user browses for a file, jquery will store the filename / path in a variable, and then display that variable as another input’s (previous input) value. That said, when a user selects a file, the file name is displayed in the other input as a value.

Here is my HTML / CSS:

<div id="upload">
    <input type="text" id="fakeUpload" value="Choose File">
    <span class="file-upload">
        <input type="file" name="file-upload" class="wpcf7-file" size="1" value="1">
    </span>
</div>


#upload{position:relative; float:left; width:100%; cursor:pointer;}
#upload input#fakeUpload{position:absolute; top:0; left:0; display:block; font-size:15px; color:black; background:#f1f1f1; padding:7px 5%;  width:90%!important; cursor:pointer; z-index:1;}
#career input[type="file"] {opacity: 0; position:absolute; top:0; left:0; z-index:2; text-align: right;}

Answer 1

Add:

$('.wpcf7-file').on('change', function(){
    $('#fakeUpload').val(this.value);
});

http://jsfiddle.net/fEp68/

The demo doesn’t have your styling, but you can use your imagination :]