FFI Demos (0.2.0)

Basic examples

Choose more than one file (IE8 doesn't support this)

Native HTML5 validation works

Because the underlying input isn't touched, HTML5 form validation (for browsers that support it) continues to work.

Internationalisation (i18n) support

Separation of concerns is achieved by utilising pseudo-elements and their content CSS property. The internationalised label text is added to the data-ffi-button-text data attribute on the ffi element (the parent of the input). You can also customise the text pattern for when multiple files are selected by adding it to a data attribute called data-ffi-multipleFileTextPattern.

Easily customised with CSS

PNG fallback for IE8

Themed examples

Styling the file inputs to match other popular UI libraries is easy.

Bootstrap

Zurb Foundation

Semantic UI

Flat UI