Fancy html file input customization using jquery fileStyle Plugin

0 120

Integrate Fancy html file input on your website

Libraries

Include the fileStyle minified CSS jquery-filestyle.min.css and JS jquery-filestyle.min.js file on page don’t forget to include latest jquery library before fileStyle JS.

<!--CSS-->
<link href="jquery-filestyle.min.css" rel="stylesheet" />
 
<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-filestyle.min.js"></script>

HTML

Create Plain fancy HTML file input element by simply calling jfilestyle() plugin function on page.

<input type="file" name="test" id="fileInput">
<script>
$(function() { $('#fileInput').jfilestyle() });
</script>

You can customize your HTML file input element by tow method 1). Using data attribute 2). Jquery function.

Customizing html file input using html data attribute.

<input type="file" class="fileInput" 
       data-buttonText="Find" 
       data-input="false"
       data-size="200px"

Customizing html file input via jquery plugin function

<script>
$(function() {   
 $('.fileInput').jfilestyle({
 
  // button text
  'text': 'Choose file',
 
  // shows input field
  'input': true,
 
  // is disabled?
  'disabled': false,
 
  // where to place the button
  'buttonBefore': false,
 
  // input size
  'inputSize': '200px',
 
  // custom placeholder
  'placeholder': '',
 
  // enable drag and drop
  'dragdrop': true,
 
  // callback
  'onChange': function () {}
 
 })
});
</script>

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.

Leave A Reply

Your email address will not be published.