jQuery widget to style HTML File Input

Usage no npm install needed!

<script type="module">
  import sjaakpStylefile from 'https://cdn.skypack.dev/@sjaakp/stylefile';


jQuery Stylefile

File input HTML controls are notorious because they are almost impossible to style by means of CSS. Each browser implements the file input in it's own way.

Stylefile is a jQuery widget that takes over the HTML file input control and allows it to be styled like the rest of the page. In addition, it gives the user more feedback on the selected file.


Stylefile is a simple jQuery control. It's only dependency is jQuery.


Load resources

At the end of the body part, load the jQuery library:

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

And the Stylefile code:

<script src="jquery.stylefile.js"></script>


Stylefile is initialised like:


Preferably, this is done in the document.ready handler, like:

    $(document).ready(function () {
            ... Stylefile options ...

To select all file inputs on a page, use something like:

    $(document).ready(function () {
            btnText: "Choose image to upload...",
            ... other Stylefile options ...



The classname(s) of the 'Browse' button. Default is: "btn btn-default" (consistent with Bootstrap CSS).


Text of the 'Browse' button. Default: "Browse".


Number of decimals in the 'nice_nbytes' presentation of the filesize. Default: 3.


The classname(s) of the informative text. Default is "text-muted", another Bootstrap classname.


Template for the informative text. It is a fragment of HTML, in which the following subtexts are replaced by information about the selected file:

  • {filename} the name of the selected file
  • {imgsize}the image size, in pixels (w x h)
  • {nbytes} the file size in bytes
  • {nice_nbytes} the file size in a more readable format.

Default: '{filename}&emsp;<span class="imgsize">{imgsize}</span><br /><span class="filesize">{nice_nbytes} ({nbytes} bytes)</span>'