File input

Create a customizable file input with support for highly used options.

About

In Metro 4, you can use enhancement version of inpput file. To define it, add attribute data-role="file" to HTML file element.


                    <input type="file" data-role="file">
                

Prepend data

You can add prepend data to file with attribute data-prepend="...".


                    <input type="file" data-role="file" data-prepend="Select your photo(s):">
                

Button caption

You can set your one value for button with attribute data-caption="...".


                    <input type="file" data-role="file" data-button-title="...">
                    <input type="file" data-role="file" data-button-title="<span class='mif-folder'></span>">
                    <input type="file" data-role="file" data-button-title="<img src='images/desktop.png'>">
                

Options

Option Data-* Default Desc
buttonTitle data-button-title Choose file(s) Cation for button
prepend data-prepend Prepend data

Events

Event Data-* Context
onSelect(files, element) data-on-select file
onFileCreate(el) data-on-file-create file

Methods

You can use methods to interact with input component: disable(), enable(), toggleState().


                    var file = $(el).data('file');
                    file.toggleState();
                

Customize

You can customize your input with special attributes:

Option Data-* Desc
clsComponent data-cls-component Additional classes for control.
clsCaption data-cls-caption Additional classes for caption control.
clsPrepend data-cls-prepend Additional classes for prepend data.
clsButton data-cls-button Additional classes for input button.

                    <input type="file" data-role="file"
                        data-cls-caption="bg-orange fg-white"
                        data-cls-button="bg-darkOrange fg-white">