1.0.4 • Published 7 years ago
style-file-input v1.0.4
style-file-input
Style file input element.
Install
npm install style-file-input --saveUsage
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
changeevent 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 http://localhost:9000/ in your browser.
License
MIT © Ivan Nikolić
MIT © Filament Group