CODEWITHSUNDEEP
jquerycssforms
user1227914
user1227914

Reputation: 3524

How to show the file name to be uploaded besides a styled file input button?

I have a styled file input button like this:

<span class="btn btn-file">Upload file <input type="file"></span>

With this styling:

.btn-file {
position: relative;
overflow: hidden;
}

.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}

It works fine, except that the file name isn't shown besides the button like in an unstyled file upload button. How do I make it show the filename?

Upvotes: 0

Views: 71

Answers (1)

possumkeys
possumkeys

Reputation: 546

I'm not sure if this what you wanted but here is the link to the fiddle.
http://jsfiddle.net/91ntfwuu

The HTML

<span class="btn btn-file">Upload file
    <span class="text"></span>
    <input type="file" id="fileinput" >
</span>

THE CSS

.btn-file {
    position: relative;
    overflow: hidden;}
.text{
    background-color:red;
    border-radius:5px;
    margin: 1em;
}

.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: pointer;
display: block;
}

THE JQUERY

$(document).ready(function(){
    $('#fileinput').on('change', function() {
        $(".text").html( $("#fileinput").val() );
    });
});

I use the .text span so that I can change it's inner html to the file name. Hope it's what you needed.

Upvotes: 1

Related Questions