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

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

Nice you done!
It works.
Thank you!

Np glad you like it! duenzo wrote:

…

Nice you done! It works. Thank you! --- Reply to this email directly or view it on GitHub: https://gist.github.com/645816

nice!
start upload after choose file by jQuery

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

How can I get the image to display after upload?

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!