NiceFileInput.js

jQuery PlugIn which makes easy to stylize with CSS the file inputs at your forms.

About

Customizing the HTML file input elements (<input type="file" />) is a time-consuming task which doesn't result the same way on different browsers. NiceFileInput makes things easy and transforms the file inputs on 3 different HTML elements (a text input, a button and a div container) which you can style with CSS the way you'll do it normally.

NiceFileInput.js is a script based on the previous work of Shaun Inman, who defined the concept behind NiceFileInput ( Styling File Inputs with CSS and the DOM ) and Mika Tuupola, who implemented nicely the idea in a jQuery plugin in some different way ( FileStyle ), so most of this plugin credit goes for them.

NiceFileInput degrades gracefully, if the user has no javascript enabled on the browser, a regular <input type="file" /> element will be there.

Requirements

NiceFileInput requires the jQuery library, available at the JQuery website jQuery.com or through the Google CDN's Content Distribution Network Google Libraries API @ Google Code.

How to use it

1. First, make sure you link the jQuery library and the NiceFileInput plugin to your Web page.

   • By using your local copy of jQuery:

     <script type="text/javascript" src="/your_path/jquery.min.js"></script>
     <script type="text/javascript" src="/your_path/jquery.nicefileinput.min.js"></script>
     

   • Or using the Google CDN's

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
     <script type="text/javascript" src="/your_path/jquery.nicefileinput.min.js"></script>
     

2. Insert the code which triggers the plugin on the jQuery Elements you want to apply it.

   <script type="text/javascript">
   /* <![CDATA[ */
       $(document).ready(function(){
         // your code...
         $("input[type=file]").nicefileinput();
       });
   /* ]]> */
   </script>
   

   You may optionally set the defult label text:

   $("input[type=file]").nicefileinput({
     label : 'Examinar...' // Spanish label
   });
   

Customize the input file with CSS

You can fully customize the look and feel of your file input in two ways:

• By using the same CSS code to stylize all your File Input elements through the following classes:

  .NFI-wrapper {
      // the container div
  }
  .NFI-button {
      // the button div element
  }
  .NFI-filename {
      // the text input element which collects and shows the value
  }
  

• Or setting the class attribute of the input file element you want to stylize individually

  // define a class on your HTML file input element
  // <input type="file" class="nice" />
  // so you can now write your CSS code as follows:
  .nice {
    // the container div
  }
  .nice .NFI-button {
    // the button div element
  }
  .nice .NFI-filename {
    // the text input element which collects and shows the value
  }
  

Examples

• Default file input browser render, no styles and no plugin.

• Plugin enabled but no CSS styles applied on the control.

• Plugin enabled and CSS styling done over the element.

• Plugin enabled and different CSS styling done.

Download

• jQuery.NiceFileInput.js @ GitHub