Skip to content

Instantly share code, notes, and snippets.

@GLC
Created June 20, 2012 05:05
Show Gist options
  • Save GLC/2958220 to your computer and use it in GitHub Desktop.
Save GLC/2958220 to your computer and use it in GitHub Desktop.
Fancy File Inputs (file name INSIDE button on change)
var SITE = SITE || {};
SITE.fileInputs = function() {
var $this = $(this),
$val = $this.val(),
valArray = $val.split('\\'),
newVal = valArray[valArray.length-1],
$button = $this.siblings('.button');
if(newVal !== '') {
$button.text(newVal); // the main change is here, I've deleted the instance of fakefile
}
};
$(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;
}
@GLC
Copy link
Author

GLC commented Jun 20, 2012

Sorry all, I deleted the original one, didn't know you could even do that O.o...

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