Fancy File Inputs

Fancy File Inputs.js

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

Markup.htm

<span class="file-wrapper">
  <input type="file" name="photo" id="photo" />
  <span class="button">Choose a Photo</span>
</span>

Style.css

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

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!

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

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

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

Thank you.

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

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

HELP!

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

Big thanks for the gist!