3
\$\begingroup\$

We have orange rounded buttons as a standard on our site. For our purposes, we switched everything over to use an anchor tag, instead of input type=button. The exception to this was the File Upload Control. For security reasons, you can't write your own, and since buttons in IE can't be rounded with pure CSS, I decided to use a combination of other people's solutions. I set the Opacity to 0, for the real File Input, and the z-index to 999. For the fake anchor and textbox, which are styled properly, I moved them to the same space that the File Input takes up, but they're underneath it in the layers. So, the File Input doesn't show up, but when people think they're clicking the anchor tag, they're really getting the File Input.

I've tested this in the browsers that we require support for, and it's definitely functional and looks good. I'm curious as to whether this has any glaring holes that I've missed.

<div class="editor-field" style="white-space: nowrap;">
    <input type="file" name="file" id="file" class="hide-file-input" />
    <input type="text" id="file-fake" class="k-textbox fileinput-textbox" />
    <span class="file-button-wrapper"><a class="button" id="fileButton">Browse</a></span>
</div>

Here is the associated script:

<script type="text/javascript">
$(document).ready(function () {
    $('#file').change(function (e) {
        $('#file-fake').val($('#file').val());
    });
});
</script>

And finally, here is the relevant CSS for positioning and hiding these elements:

input.fileinput-textbox {
    float: left;
    position: absolute;
    width: 158px !important;
    left: 117px;
    display: inline-block;
}

.file-button-wrapper {
    float: left;
    background-color: #ffffff;
    position:absolute;
    margin: 0;
    padding: 5px;
    width: 70px;
    height: 20px;
    left: 273px;
    display: inline-block;
}

.hide-file-input {
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    z-index: 999;
    line-height: 0;
    position: relative;
    overflow:hidden;
    width: 240px;
}

The only drawback I've found is that the script only shows the file name, not the path, like the real File Input would. This isn't a problem for our business unit, though, so I haven't even checked to see if I could show the full path. (I think it's a benefit, personally). Other solutions seem to want to throw the File Input off the screen altogether, but I couldn't see a reason not to do it this way.

\$\endgroup\$
  • 2
    \$\begingroup\$ FYI: revealing the path to the file to JavaScript is considered a security vulnerability, which is why only the native form control has access to it. Some older browsers (particularly older IE) grant you access to the full file path. \$\endgroup\$ – cimmanon Jun 28 '13 at 18:09
  • \$\begingroup\$ May I ask why you can't just use buttons and style them with CSS? Rounded corners are possible. \$\endgroup\$ – kleinfreund Jan 26 '14 at 11:19
  • \$\begingroup\$ As I said in the original question "buttons in IE can't be rounded with pure CSS". \$\endgroup\$ – Lucas Fowler Jan 27 '14 at 16:23
  • \$\begingroup\$ @kleinfreund I'm quite well aware of that, and yes I was talking about IE8. Not sure why you're pressing this issue, at this point. \$\endgroup\$ – Lucas Fowler Feb 3 '14 at 21:20
  • \$\begingroup\$ Try this quirksmode.org/dom/inputfile.html \$\endgroup\$ – Aamir Afridi Feb 10 '14 at 14:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.