Skip to content

Instantly share code, notes, and snippets.

@davist11
Created October 25, 2010 21:32
Show Gist options
  • Save davist11/645816 to your computer and use it in GitHub Desktop.
Save davist11/645816 to your computer and use it in GitHub Desktop.
Fancy File Inputs
var SITE = SITE || {};
SITE.fileInputs = function() {
var $this = $(this),
$val = $this.val(),
valArray = $val.split('\\'),
newVal = valArray[valArray.length-1],
$button = $this.siblings('.button'),
$fakeFile = $this.siblings('.file-holder');
if(newVal !== '') {
$button.text('Photo Chosen');
if($fakeFile.length === 0) {
$button.after('<span class="file-holder">' + newVal + '</span>');
} else {
$fakeFile.text(newVal);
}
}
};
$(document).ready(function() {
$('.file-wrapper input[type=file]').bind('change focus click', SITE.fileInputs);
});
<span class="file-wrapper">
<input type="file" name="photo" id="photo" />
<span class="button">Choose a Photo</span>
</span>
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
filter: alpha(opacity=1);
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #79130e;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
padding: 4px 18px;
text-transform: uppercase;
}
@jvilk
Copy link

jvilk commented Dec 14, 2012

Thank you so much! I've used this as a solution to an infuriating problem I was having (documented here: plasma-umass/doppio#121 (comment) ). This ended up looking much, much better!

@sharmanstaples
Copy link

This works splendidly. You integrated the pieces nicely, and provided all of us with complete functionality! Thanks a bunch.

@vitality82
Copy link

This is a really nice solution! Would you know how to add the size (MB, KB) of the chosen file to the feedback? Thx

edit:

console.log(this.files[0].size); inside the if(newVal !== '') condition retrieves file size. But IE has an error:

SCRIPT5007: Unable to get value of the property '0': object is null or undefined

@starchild
Copy link

only issue is, I can't get the cursor:pointer to work on this.

@feyromain
Copy link

Thank you.

@leoalassia
Copy link

cursor:pointer works well for me in IE, Opera, but not in Webkit based.

@corradoprever
Copy link

Amazing job indeed... well done

The only issue left is that is not possible have hover effect sop i did that with more jquery with css property

@kalmtib
Copy link

kalmtib commented Sep 15, 2014

HELP!

On IE 9 does'nt work for me....

@franzose
Copy link

franzose commented May 7, 2015

Big thanks for the gist!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment