https://github.com/niksy/style-file-input

Style file input element.
https://github.com/niksy/style-file-input

Last synced: about 2 months ago
JSON representation

Style file input element.

• Host: GitHub
• URL: https://github.com/niksy/style-file-input
• Owner: niksy
• License: other
• Created: 2014-12-10T06:52:59.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2017-04-25T22:31:41.000Z (over 7 years ago)
• Last Synced: 2024-10-18T04:04:03.225Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 147 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# style-file-input

[![Build Status][ci-img]][ci] [![BrowserStack Status][browserstack-img]][browserstack]

Style file input element.

## Install

```sh

npm install style-file-input --save

```

## Usage

**Markup**

```html

```

**Style**

```css

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

```

If you use [PostCSS](https://github.com/postcss/postcss) and [postcss-import](https://github.com/postcss/postcss-import) plugin, it will automatically use provided [default styling](https://github.com/niksy/style-file-input/blob/master/index.css).

**Client-side functionality**

```js

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](https://github.com/filamentgroup/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  in your browser.

## License

MIT © [Ivan Nikolić](http://ivannikolic.com)  

MIT © [Filament Group](http://www.filamentgroup.com/)

[ci]: https://travis-ci.org/niksy/style-file-input

[ci-img]: https://travis-ci.org/niksy/style-file-input.svg?branch=master

[browserstack]: https://www.browserstack.com/

[browserstack-img]: https://www.browserstack.com/automate/badge.svg?badge_key=OGNwUys4NUZVNVJleUpHTDNORGVxamhuZitSVk9zbEVJa2pCajFnS2FVOD0tLXdxTW16Nm1WTGphS1dLQXE1aW1EUmc9PQ==--0088ec8799d554c805b2d93c5aa56cc24d2d592d