style-file-input

Style file input element.

Install

npm install style-file-input --save

Usage

Markup

<input type="file" />

Style

@import url('style-file-input');

If you use PostCSS and postcss-import plugin, it will automatically use provided default styling.

Client-side functionality

const stylefileinput = require('style-file-input');
const element = document.querySelector('input[type="file"]');
const instance = stylefileinput(element);

API

stylefileinput(element[, options])

Returns: Object

element

Type: Element

Element on which to apply changes.

options

Type: Object

Property	Type	Default	Description
browseButtonLabel	String	'Browse'	Button label for browse action.
changeButtonLabel	String	'Change'	Button label for change action.
noFileSelectedText	String	'No file selected'	Default input value placeholder.
wrapperClass	String	'kist-Stylefileinput'	Wrapper class.
inputClass	String	'kist-Stylefileinput-input'	Input class.
buttonClass	String	'kist-Stylefileinput-button'	Browse/change button class.
textClass	String	'kist-Stylefileinput-text'	Input value placeholder class.

instance.destroy()

Destroy instance.

Browser support

Tested in IE9+ and all modern browsers.

Caveats

• Opera Mini doesn’t fire change event when input value is changed so it won’re replace default text.

Acknowledgments

• Based on Filament Group’s jQuery Custom File Input.

Test

For local automated tests, run npm run test:automated:local (append :watch for watcher support).

For local integration tests, run npm run test:integration:local (append :watch for watcher support).

For manual tests, run npm run test:manual:local and open http://localhost:9000/ in your browser.

License

MIT © Ivan Nikolić
MIT © Filament Group