metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Enhancement for standard HTML file input control. Excellent to create the element for pin enter. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>File input - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Input</a></li> <li class="toc-entry"><a href="#_file_about">About</a></li> <li class="toc-entry"><a href="#_file_prepend">Prepend data</a></li> <li class="toc-entry"><a href="#_file_caption">Button caption</a></li> <li class="toc-entry"><a href="#_file_drop">Drop mode</a></li> <li class="toc-entry"><a href="#_file_options">Options</a></li> <li class="toc-entry"><a href="#_file_events">Events</a></li> <li class="toc-entry"><a href="#_file_methods">Methods</a></li> <li class="toc-entry"><a href="#_file_customize">Customize</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>File input</h1> <p class="text-leader"> Create a customizable file input with support for highly used options. </p>  <h3 id="_file_about">About</h3> <p> In Metro 4, you can use enhancement version of <code>inpput file</code>. To define it, add attribute <code>data-role="file"</code> to HTML file element. </p> <div class="example"> <input type="file" data-role="file"> </div> <pre><code> <input type="file" data-role="file"> </code></pre> <h3 id="_file_prepend">Prepend data</h3> <p> You can add prepend data to file with attribute <code>data-prepend="..."</code>. </p> <div class="example"> <input type="file" data-role="file" data-prepend="Select your photo(s):"> </div> <pre><code> <input type="file" data-role="file" data-prepend="Select your photo(s):"> </code></pre> <h3 id="_file_caption">Button caption</h3> <p> You can set your one value for button with attribute <code>data-caption="..."</code>. </p> <div class="example"> <input type="file" data-role="file" data-button-title="..."> <input type="file" data-role="file" data-button-title="<span class='mif-folder mif-2x'></span>" class="mt-4"> <input type="file" data-role="file" data-button-title="<img src='images/desktop.png'>" class="mt-4"> </div> <pre><code> <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'>"> </code></pre> <h3 id="_file_drop">Drop mode</h3> <p class="text-small">New in 4.2.22</p> <p> You can transform input to <code>drop zone</code> with attribute <code>data-mode="drop"</code>. </p> <div class="example"> <input type="file" data-role="file" data-mode="drop"> </div> <pre><code> <input type="file" data-role="file" data-mode="drop"> </code></pre>  <h3 id="_file_options">Options</h3> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Option</th> <th>Data-*</th> <th>Default</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>buttonTitle</code></td> <td><code>data-button-title</code></td> <td>Choose file(s)</td> <td>Cation for button</td> </tr> <tr> <td><code>prepend</code></td> <td><code>data-prepend</code></td> <td></td> <td>Prepend data</td> </tr> </tbody> </table> <h3 id="_file_events">Events</h3> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Event</th> <th>Data-*</th> <th>Context</th> </tr> </thead> <tbody> <tr> <td><code>onSelect(files, element)</code></td> <td><code>data-on-select</code></td> <td>file</td> </tr> <tr> <td><code>onFileCreate(el)</code></td> <td><code>data-on-file-create</code></td> <td>file</td> </tr> </tbody> </table> <h3 id="_file_methods">Methods</h3> <p> You can use methods to interact with input component: <code>disable()</code>, <code>enable()</code>, <code>toggleState()</code>. </p> <pre><code> var file = $(el).data('file'); file.toggleState(); </code></pre> <h3 id="_file_customize">Customize</h3> <p> You can customize your input with special attributes: </p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Option</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>clsComponent</code></td> <td><code>data-cls-component</code></td> <td>Additional classes for control.</td> </tr> <tr> <td><code>clsCaption</code></td> <td><code>data-cls-caption</code></td> <td>Additional classes for caption control.</td> </tr> <tr> <td><code>clsPrepend</code></td> <td><code>data-cls-prepend</code></td> <td>Additional classes for prepend data.</td> </tr> <tr> <td><code>clsButton</code></td> <td><code>data-cls-button</code></td> <td>Additional classes for input button.</td> </tr> </tbody> </table> <div class="example"> <input type="file" data-role="file" data-cls-caption="bg-orange fg-white" data-cls-button="bg-darkOrange fg-white"> </div> <pre><code> <input type="file" data-role="file" data-cls-caption="bg-orange fg-white" data-cls-button="bg-darkOrange fg-white"> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>