
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'>">
Drop mode
New in 4.2.22
You can transform input to drop zone
with attribute data-mode="drop"
.
<input type="file" data-role="file" data-mode="drop">
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">