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