style-file-input

Style file input element.

CSS support for styling button element is widely available, but it doesn’t cover case where you want to style chosen filename 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 | 'Stylefileinput' | Wrapper class. | | inputClass | string | 'Stylefileinput-input' | Input class. | | buttonClass | string | 'Stylefileinput-button' | Browse/change button class. | | textClass | string | 'Stylefileinput-text' | Input value placeholder class. |

stylefileinput.defaultOptions

Access to default options so you can e.g. compose class values for elements.

instance.destroy()

Destroy instance.

Browser support

Tested in Chrome 80, Edge 80, Firefox 72 and should work in all modern browsers (support based on Browserslist configuration).

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 automated tests, run npm run test:automated (append :watch for watcher support).

For manual tests, run npm run test:manual.

License

MIT © Ivan Nikolić
MIT © Filament Group