JavaScript: Input File Type Click Trick

by SpYk3

HTML

<div class="file-test-area">
    <div class="file-input wrapper">
        <input id="inpFile0" type="file" class="file-input control" />
        <div class="file-input content">
            <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
            <input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
        </div>
    </div>
</div>
<div class="file-test-area">
    <div class="file-input wrapper">
        <input id="inpFile1" type="file" class="file-input control" />
        <label id="inpFileOutput1" for="inpFileButton" class="file-input output">Output Only</label>
        <div class="file-input content">
            <input id="inpFileButton1" type="button" class="file-input button" value="Select File" />
        </div>
    </div>
</div>

<hr />
<h2 style="padding-left: 1em;">Play Area</h2>
<div id="PlayArea" class="file-test-area">
    <div class="file-input wrapper">
        <input id="inpFile2" type="file" class="file-input control" />
        <label id="inpFileOutput2" for="inpFileButton" class="file-input output">Output Only</label>
        <div class="file-input content">
            <input id="inpFileButton2" type="button" class="file-input button" value="Select File" />
        </div>
    </div>
</div>

<center style="margin-top:1em;">
    <button id="btnTryClick">Try jQuery Click</button>
    <p style="margin-top:0;"><sub>Will not work in all browsers</sub><p>
</center>

CSS

body {
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    width: 100%;
}
/*input[type="file"] { opacity: .25 !important; background: #00A; }*/
.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    
    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

#PlayArea {
    border: .5em inset #F00;
    background-color: #00F;
}
#PlayArea .file-input.output {
    background-color: #000;
    color: #0F0;
    font-size: .9em;
    font-style: italic;
}
#PlayArea .file-input.button {
    background-color: #EEE;
    border: 3px groove #800000;
    color: #00008B;
    font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}

JavaScript

var inpFile = document.getElementById("inpFile0"),
    inpFileOutput = document.getElementById("inpFileOutput0"),
    inpFileButton = document.getElementById("inpFileButton0");

// simply how to grab each input as needed
console.log(inpFile, inpFileOutput, inpFileButton);

// the following will actually asign the label of each input area the functionality of collecting selected file names
var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
    if (inp[i].type != 'file') continue;
    inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inp[i].onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
    };
};

// you'd be surprised how many browsers now support this
$("#btnTryClick").click(function(e) {
    $(inpFile).click();
});