Inputfile
html javascript
<p>Form elements are some of the most challenging elements I know of in terms of styling. Browsers kinda do what you want with most of them though. With one exception and a major one at that, the input type = file. With that one every browser does what it wants, providing us as front enders with a challenge, as we have to satisfy the designers and so on.</p><p>A lot of the times we can get away with just accepting the fact that browsers are what they are, just whimsical annoying buggers. Sometimes a project calls for styling just the same, even on the file input. Just recently I came across such a project.</p><h3>The source</h3><p>Luckily we have giants to look at, such as <a href="https://quirksmode.org" title="ppk" rel="met friend">the scariest hair in javascript</a>, who allready gave us a <a href="https://www.quirksmode.org/dom/inputfile.html">solution</a> and cautions us about using it.</p><p>That caution I share, so beware...</p><h3>Anyway</h3><p>But sometimes we have (or want) to take changes and do it anyway. So I wanted to implement the solution by ppk but in a <a href="https://jquery.com">jQuery</a> fashion. Thus I wrote a plugin to do what I wanted for jQuery, appropriately name inputfile.</p><p>Look at the <a href="https://www.wnas.nl/demo/inputfile/">demo</a> or just get the <a href="https://www.wnas.nl/js/plugins/inputfile/inputfile.js">code</a>. And now for some explanation:</p><p>We start out by defining a new plug in like this.</p><pre><code>jQuery.fn.inputfile = function (){<br><br>}</code></pre><p>In this we first add a class to the input file we are going to fake, with this class we can hide it and put it over the fake file input. We than get the id and store it in a variable as we are going to need it later on.</p><pre><code> jQuery(this).addClass('hidden');<br> var fii = jQuery(this).attr('id');</code></pre><p>So with the preliminaries out of the way, we start building the fake stuff. What do we need, first an input type=text and a button, as those seem to appear in most file inputs and we are going to fake one, not define a new UI element.</p><pre><code>jQuery(this)<br> .after('<div class="fakefile"> >><br /> <input type="text" class="fakefile ' + fii + ' " /> >><br /> <span class="btn">choose</span> >><br /> </div>');</code></pre><p>We than use css to position these element underneath the (nearly) hidden fileinput so that if the user clicks on the button he is in fact interacting with the fileinput. Now we need to let the input text reflect the changes made when something is uploaded and were done..</p><pre><code> jQuery(this).change(function () {<br> var val = jQuery(this).val();<br> jQuery('.'+fii).val(val);<br> });</code></pre><p>And presto, we are done.To use the function you just need to include jQuery and the plugin in your page and call it like this:</p><pre><code>jQuery('foobar').inputfile();</code></pre><p>Have fun and use it wisely. I would love to hear from you when you use it, btw.</p>