Mask Fileupload input

Tricky Input type=file Field pimped!

by bitstarr

HTML

<form>
    <label id="upload">
        <span class="labelText">Datei hochladen</span>
        <input type="file" class="file" id="file" />
    </label>
    <span id="filename">Keine Datei ausgewählt.</span>
</form>
<!--
mixed a bit of these:
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
http://www.filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/
-->

CSS

* {
    font: .9em/1.5 sans-serif;
}

body { padding: 2em }
#upload {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
    width: 100px;
    height: 32px;
    padding: 0 0 0 50px;
    margin: 0 0 1em;
    background: #ccc url(http://cdn5.iconfinder.com/data/icons/32px_Mantra/PNG/Cloud%20Upload%20Off.png) 10px 0 no-repeat;
    background: 
        url(http://cdn5.iconfinder.com/data/icons/32px_Mantra/PNG/Cloud%20Upload%20Off.png) 10px 0 no-repeat,
        -moz-linear-gradient(top, #DCE2E3, #AFB6B8),
        #ccc;
    border: 1px solid rgba(0,0,0,.25);
    border-bottom-color: rgba(0,0,0,.35);
    border-radius: 5px;
}

#upload input.file {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    cursor: pointer;
}

.labelText {
    font-size: 1.1em;
    font-weight: 700;
    line-height: 32px;
    color: #333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

span#filename {
    padding: .3em .6em;
    color: #fff;
    background: #333;
    border-radius: 5px;
}

JavaScript

fileInput = $('#file');
upload = $('#upload');

fileInput.change(function() {
    $('#filename').html(this.value);
});
    
upload.mousemove(function(e){
    fileInput.css({
        'left': e.pageX - upload.offset().left - fileInput.outerWidth() + 20,
        'top': e.pageY - upload.offset().top - $(window).scrollTop() - 3
    });    
});