Skip to content
Replace the system inputfile with an -traslatable- HTML5 button
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
resources
src
.bowerrc
.gitignore
.jshintrc
bower.json
gulpfile.js
package.json
readme.md

readme.md

Better-input-file-button

Better-input-file-button is a jQuery plugin that replaces the system default input type="file" button for an improved -and translatable- html5 button.

Preview

Live examples

Installing with Bower

$ bower install better-input-file

Including files

<!-- Bootstrap3 CSS (optional) -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery 1.7.2+ -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- better-input-file-button core JS file -->
<script src="betterInputFileButton.js"></script>

##Initializing the plugin You can target all input type="file" this way:

$(document).ready(function(){
    
	$('input:file').betterInputFile();
	
});

Configuration

You can customize the button by passing the options as JSON object.

In the plugin directly:

$('input:file').betterInputFile(
    {
        'btnText': 'Select a file',
        'placeholder': 'No file selected'
    }
);

With data atributes in the HTML input tag:

<input type="file" data-btnText="Select a file" data-placeholder="No file selected" />

Note: Inline configurations overrides the script configurations.

Options

mainClass

string - Default: 'betterInputFile'

String that contains classes that will be added to the root element of the beter input button plugin.

btnText

string - Default: 'Select a file'

String that contains the button text.

btnClass

string - Default: 'btn btn-primary'

btnLeft

boolean - Default: true

This property set the position of the button to the left (default) or right of the input box.

placeholder

string - Default: "No file selected",

String that contains the input placeholder text.

multiple

boolean - Default: False

Define if the input file can select multiple files.

multipleFilesText

string - Default: "Files selected"

String that contains the text to display when multiple files are selected.

Callbacks

afterSelect

function - Parameters: filelist (object)

This callback is trigger after a file or grupo of files are selected. The filelist parameter returns an object that contains a list of the file of files selected.

$('input:file').betterInputFile({
    afterSelect: function(filelist){
        $.each(filelist, function(key, file){
            console.log( file.name );
        })
    }
})

Technologies

  • jQuery
  • HTML5
  • CSS -Bootstrap3

Browser suppor

  • IE7+
  • Chrome
  • Firefox

Version

  • Version 1.1
You can’t perform that action at this time.