Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
@GLC
Copy link

GLC commented Mar 15, 2012

Great resource, I am using it on logopond.com, I wanted the file text inside the button i am using (cause its a large button) so i modified the code to place the variable 'newVal' into the button text on change:

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);
  }
};

@duenzo
Copy link

duenzo commented Apr 24, 2012

Nice you done!
It works.
Thank you!

@GLC
Copy link

GLC commented Apr 24, 2012 via email

@yakovlev-vladimir
Copy link

nice!
start upload after choose file by jQuery

$('input[type=file]').change(function() { 
   // select the form and submit
  $('form').submit(); 
});

@bradenhamm
Copy link

How can I get the image to display after upload?

@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