style-file-input

Style file input element.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
style-file-input
021.0.47 years ago7 years agoMinified + gzip package size for style-file-input in KB

Readme

style-file-input
!Build Statusci-imgci !BrowserStack Statusbrowserstack-imgbrowserstack
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

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 in your browser.

License

MIT © Ivan Nikolić
MIT © Filament Group