mirror of
https://github.com/openwrt/luci.git
synced 2026-04-15 19:01:56 +00:00
3 lines
44 KiB
HTML
3 lines
44 KiB
HTML
<!DOCTYPE html><html lang="en" style="font-size:16px"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.png"><link type="text/css" rel="stylesheet" href="extra.css"><title>Class: FileUpload</title><!--[if lt IE 9]>
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]--><script src="scripts/third-party/hljs.js" defer="defer"></script><script src="scripts/third-party/hljs-line-num.js" defer="defer"></script><script src="scripts/third-party/popper.js" defer="defer"></script><script src="scripts/third-party/tippy.js" defer="defer"></script><script src="scripts/third-party/tocbot.min.js"></script><script>var baseURL="/",locationPathname="";baseURL=(locationPathname=document.location.pathname).substr(0,locationPathname.lastIndexOf("/")+1)</script><link rel="stylesheet" href="styles/clean-jsdoc-theme.min.css"><svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"><defs><symbol id="copy-icon" viewbox="0 0 488.3 488.3"><g><path d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124 C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124 c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z"/><path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227 c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6 V38.6C439.65,17.3,422.35,0,401.05,0z"/></g></symbol><symbol id="search-icon" viewBox="0 0 512 512"><g><g><path d="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474 c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323 c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848 S326.847,409.323,225.474,409.323z"/></g></g><g><g><path d="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328 c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z"/></g></g></symbol><symbol id="font-size-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.246 15H4.754l-2 5H.6L7 4h2l6.4 16h-2.154l-2-5zm-.8-2L8 6.885 5.554 13h4.892zM21 12.535V12h2v8h-2v-.535a4 4 0 1 1 0-6.93zM19 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></symbol><symbol id="add-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></symbol><symbol id="minus-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11h14v2H5z"/></symbol><symbol id="dark-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol><symbol id="light-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol><symbol id="reset-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.537 19.567A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 2.136-.67 4.116-1.81 5.74L17 12h3a8 8 0 1 0-2.46 5.772l.997 1.795z"/></symbol><symbol id="down-icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"></path></symbol><symbol id="codepen-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.5 13.202L13 15.535v3.596L19.197 15 16.5 13.202zM14.697 12L12 10.202 9.303 12 12 13.798 14.697 12zM20 10.869L18.303 12 20 13.131V10.87zM19.197 9L13 4.869v3.596l3.5 2.333L19.197 9zM7.5 10.798L11 8.465V4.869L4.803 9 7.5 10.798zM4.803 15L11 19.131v-3.596l-3.5-2.333L4.803 15zM4 13.131L5.697 12 4 10.869v2.262zM2 9a1 1 0 0 1 .445-.832l9-6a1 1 0 0 1 1.11 0l9 6A1 1 0 0 1 22 9v6a1 1 0 0 1-.445.832l-9 6a1 1 0 0 1-1.11 0l-9-6A1 1 0 0 1 2 15V9z"/></symbol><symbol id="close-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></symbol><symbol id="menu-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></symbol></defs></svg></head><body data-theme="fallback-dark"><div class="sidebar-container"><div class="sidebar" id="sidebar"><a href="/" class="sidebar-title sidebar-title-anchor">LuCI Documentation</a><div class="sidebar-items-container"><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-tutorials"><div>Tutorials</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="tutorial-JsonRpcHowTo.html">Using JSON RPC daemon</a></div><div class="sidebar-section-children"><a href="tutorial-Modules.html">Modules</a></div><div class="sidebar-section-children"><a href="tutorial-ThemesHowTo.html">Making Themes</a></div><div class="sidebar-section-children"><a href="tutorial-i18n.html">Internationalisation - i18n</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-modules"><div>Modules</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="LuCI.module_cbi.html">cbi</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="LuCI.html">LuCI</a></div><div class="sidebar-section-children"><a href="LuCI.baseclass.html">baseclass</a></div><div class="sidebar-section-children"><a href="LuCI.dom.html">dom</a></div><div class="sidebar-section-children"><a href="LuCI.form.html">form</a></div><div class="sidebar-section-children"><a href="LuCI.form.AbstractElement.html">AbstractElement</a></div><div class="sidebar-section-children"><a href="LuCI.form.AbstractSection.html">AbstractSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.AbstractValue.html">AbstractValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.Button.html">Button</a></div><div class="sidebar-section-children"><a href="LuCI.form.DirectoryPicker.html">DirectoryPicker</a></div><div class="sidebar-section-children"><a href="LuCI.form.DummyValue.html">DummyValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.DynamicList.html">DynamicList</a></div><div class="sidebar-section-children"><a href="LuCI.form.FileUpload.html">FileUpload</a></div><div class="sidebar-section-children"><a href="LuCI.form.Flag.html">Flag</a></div><div class="sidebar-section-children"><a href="LuCI.form.GridSection.html">GridSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.HiddenValue.html">HiddenValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.JSONMap.html">JSONMap</a></div><div class="sidebar-section-children"><a href="LuCI.form.ListValue.html">ListValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.Map.html">Map</a></div><div class="sidebar-section-children"><a href="LuCI.form.MultiValue.html">MultiValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.NamedSection.html">NamedSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.RangeSliderValue.html">RangeSliderValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.RichListValue.html">RichListValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.SectionValue.html">SectionValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.TableSection.html">TableSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.TextValue.html">TextValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.TypedSection.html">TypedSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.Value.html">Value</a></div><div class="sidebar-section-children"><a href="LuCI.fs.html">fs</a></div><div class="sidebar-section-children"><a href="LuCI.headers.html">headers</a></div><div class="sidebar-section-children"><a href="LuCI.network.html">network</a></div><div class="sidebar-section-children"><a href="LuCI.network.Device.html">Device</a></div><div class="sidebar-section-children"><a href="LuCI.network.Hosts.html">Hosts</a></div><div class="sidebar-section-children"><a href="LuCI.network.Protocol.html">Protocol</a></div><div class="sidebar-section-children"><a href="LuCI.network.WifiDevice.html">WifiDevice</a></div><div class="sidebar-section-children"><a href="LuCI.network.WifiNetwork.html">WifiNetwork</a></div><div class="sidebar-section-children"><a href="LuCI.network.WifiVlan.html">WifiVlan</a></div><div class="sidebar-section-children"><a href="LuCI.poll.html">poll</a></div><div class="sidebar-section-children"><a href="LuCI.request.html">request</a></div><div class="sidebar-section-children"><a href="LuCI.request.poll.html">poll</a></div><div class="sidebar-section-children"><a href="LuCI.response.html">response</a></div><div class="sidebar-section-children"><a href="LuCI.rpc.html">rpc</a></div><div class="sidebar-section-children"><a href="LuCI.session.html">session</a></div><div class="sidebar-section-children"><a href="LuCI.uci.html">uci</a></div><div class="sidebar-section-children"><a href="LuCI.ui.html">ui</a></div><div class="sidebar-section-children"><a href="LuCI.ui.AbstractElement.html">AbstractElement</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Checkbox.html">Checkbox</a></div><div class="sidebar-section-children"><a href="LuCI.ui.ComboButton.html">ComboButton</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Combobox.html">Combobox</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Dropdown.html">Dropdown</a></div><div class="sidebar-section-children"><a href="LuCI.ui.DynamicList.html">DynamicList</a></div><div class="sidebar-section-children"><a href="LuCI.ui.FileUpload.html">FileUpload</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Hiddenfield.html">Hiddenfield</a></div><div class="sidebar-section-children"><a href="LuCI.ui.RangeSlider.html">RangeSlider</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Select.html">Select</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Textarea.html">Textarea</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Textfield.html">Textfield</a></div><div class="sidebar-section-children"><a href="LuCI.ui.changes.html">changes</a></div><div class="sidebar-section-children"><a href="LuCI.ui.menu.html">menu</a></div><div class="sidebar-section-children"><a href="LuCI.ui.tabs.html">tabs</a></div><div class="sidebar-section-children"><a href="LuCI.validation.html">validation</a></div><div class="sidebar-section-children"><a href="LuCI.validation.Validator.html">Validator</a></div><div class="sidebar-section-children"><a href="LuCI.validation.ValidatorFactory.html">ValidatorFactory</a></div><div class="sidebar-section-children"><a href="LuCI.view.html">view</a></div><div class="sidebar-section-children"><a href="LuCI.xhr.html">xhr</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-externals"><div>Externals</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="external-String.html">String</a></div></div></div></div></div><div class="navbar-container" id="VuAckcnZhf"><nav class="navbar"><div class="navbar-left-items"><div class="github-home navbar-item"><a id="" href="https://github.com/openwrt/luci" target="">GitHub Project Page</a></div></div><div class="navbar-right-items"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#dark-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div><nav></nav></nav></div><div class="toc-container"><div class="toc-content"><span class="bold">On this page</span><div id="eed4d2a0bfd64539bb9df78095dec881"></div></div></div><div class="body-wrapper"><div class="main-content"><div class="main-wrapper"><section><header><h1 id="FileUpload-title" class="has-anchor"><span class="ancestors"><a href="LuCI.html">LuCI</a><a href="LuCI.ui.html">.ui</a>.</span> FileUpload</h1><div class="class-description"><p>The <code>FileUpload</code> class implements a widget which allows the user to upload, browse, select and delete files beneath a predefined remote directory.</p><p>UI widget instances are usually not supposed to be created by view code directly, instead they're implicitly created by <code>LuCI.form</code> when instantiating CBI forms.</p><p>This class is automatically instantiated as part of <code>LuCI.ui</code>. To use it in views, use <code>'require ui'</code> and refer to <code>ui.FileUpload</code>. To import it in external JavaScript, use <code>L.require("ui").then(...)</code> and access the <code>FileUpload</code> property of the class instance value.</p></div></header><article><div class="container-overview"><h2 id="constructor" class="has-anchor">Constructor</h2><h3 class="name has-anchor" id="FileUpload"><span class="type-signature"></span>new FileUpload<span class="signature">(value<span class="signature-attributes">opt</span>, options<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Instantiate a file upload widget.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>value</code></td><td class="type"><span class="param-type">string</span> |<wbr> <span class="param-type">Array.<string></span></td><td class="attributes"><optional><br></td><td class="default">null</td><td class="description last"><p>The initial input value.</p></td></tr><tr><td class="name"><code>options</code></td><td class="type"><span class="param-type"><a href="LuCI.ui.DynamicList.html#.InitOptions">LuCI.<wbr>ui.<wbr>DynamicList.<wbr>InitOptions</a></span></td><td class="attributes"><optional><br></td><td class="default"></td><td class="description last"><p>Object describing the widget specific options to initialize the file upload control.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line3036">line 3036</a></li></ul></dd></div></dl></div><h2 id="Extends" class="subsection-title has-anchor">Extends</h2><ul><li><a href="LuCI.ui.AbstractElement.html">LuCI.ui.AbstractElement</a></li></ul><h2 id="methods" class="subsection-title has-anchor">Methods</h2><h3 class="name has-anchor" id="getValidationError"><span class="type-signature"></span>getValidationError<span class="signature">()</span><span class="type-signature"> → {string}</span></h3><div class="description"><p>Returns the current validation error</p></div><dl class="details"><div class="details-item-container"><dt class="inherited-from bold">Inherited From</dt><dd class="inherited-from"><ul><li><a href="LuCI.ui.AbstractElement.html#getValidationError">LuCI.ui.AbstractElement#getValidationError</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line169">line 169</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>The validation error at this time</p></div><dl class="param-type"><dt>Type: </dt><dd><span class="param-type">string</span></dd></dl></div><h3 class="name has-anchor" id="getValue"><span class="type-signature"></span>getValue<span class="signature">()</span><span class="type-signature"> → {string|Array.<string>|null}</span></h3><div class="description"><p>Read the current value of the input widget.</p></div><dl class="details"><div class="details-item-container"><dt class="tag-overrides bold">Overrides</dt><dd class="tag-overrides"><ul><li><a href="LuCI.ui.AbstractElement.html#getValue">LuCI.ui.AbstractElement#getValue</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line3669">line 3669</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>The current value of the input element. For simple inputs like text fields or selects, the return value type will be a - possibly empty - string. Complex widgets such as <code>DynamicList</code> instances may result in an array of strings or <code>null</code> for unset values.</p></div><dl class="param-type"><dt>Type: </dt><dd><span class="param-type">string</span> |<wbr> <span class="param-type">Array.<string></span> |<wbr> <span class="param-type">null</span></dd></dl></div><h3 class="name has-anchor" id="isChanged"><span class="type-signature"></span>isChanged<span class="signature">()</span><span class="type-signature"> → {boolean}</span></h3><div class="description"><p>Check whether the input value was altered by the user.</p></div><dl class="details"><div class="details-item-container"><dt class="inherited-from bold">Inherited From</dt><dd class="inherited-from"><ul><li><a href="LuCI.ui.AbstractElement.html#isChanged">LuCI.ui.AbstractElement#isChanged</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line144">line 144</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Returns <code>true</code> if the input value has been altered by the user or <code>false</code> if it is unchanged. Note that if the user modifies the initial value and changes it back to the original state, it is still reported as changed.</p></div><dl class="param-type"><dt>Type: </dt><dd><span class="param-type">boolean</span></dd></dl></div><h3 class="name has-anchor" id="isValid"><span class="type-signature"></span>isValid<span class="signature">()</span><span class="type-signature"> → {boolean}</span></h3><div class="description"><p>Check whether the current input value is valid.</p></div><dl class="details"><div class="details-item-container"><dt class="inherited-from bold">Inherited From</dt><dd class="inherited-from"><ul><li><a href="LuCI.ui.AbstractElement.html#isValid">LuCI.ui.AbstractElement#isValid</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line157">line 157</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Returns <code>true</code> if the current input value is valid or <code>false</code> if it does not meet the validation constraints.</p></div><dl class="param-type"><dt>Type: </dt><dd><span class="param-type">boolean</span></dd></dl></div><h3 class="name has-anchor" id="registerEvents"><span class="type-signature"></span>registerEvents<span class="signature">(targetNode, synevent, events)</span></h3><div class="description"><p>Dispatch a custom (synthetic) event in response to received events.</p><p>Sets up event handlers on the given target DOM node for the given event names that dispatch a custom event of the given type to the widget root DOM node.</p><p>The primary purpose of this function is to set up a series of custom uniform standard events such as <code>widget-update</code>, <code>validation-success</code>, <code>validation-failure</code> etc. which are triggered by various different widget specific native DOM events.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>targetNode</code></td><td class="type"><span class="param-type">Node</span></td><td class="description last"><p>Specifies the DOM node on which the native event listeners should be registered.</p></td></tr><tr><td class="name"><code>synevent</code></td><td class="type"><span class="param-type">string</span></td><td class="description last"><p>The name of the custom event to dispatch to the widget root DOM node.</p></td></tr><tr><td class="name"><code>events</code></td><td class="type"><span class="param-type">Array.<string></span></td><td class="description last"><p>The native DOM events for which event handlers should be registered.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="inherited-from bold">Inherited From</dt><dd class="inherited-from"><ul><li><a href="LuCI.ui.AbstractElement.html#registerEvents">LuCI.ui.AbstractElement#registerEvents</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line219">line 219</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="render"><span class="type-signature"></span>render<span class="signature">()</span><span class="type-signature"> → {Node}</span></h3><div class="description"><p>Render the widget, set up event listeners and return resulting markup.</p></div><dl class="details"><div class="details-item-container"><dt class="tag-overrides bold">Overrides</dt><dd class="tag-overrides"><ul><li><a href="LuCI.ui.AbstractElement.html#render">LuCI.ui.AbstractElement#render</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line3144">line 3144</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Returns a DOM Node or DocumentFragment containing the rendered widget markup.</p></div><dl class="param-type"><dt>Type: </dt><dd><span class="param-type">Node</span></dd></dl></div><h3 class="name has-anchor" id="setChangeEvents"><span class="type-signature"></span>setChangeEvents<span class="signature">(targetNode, …events)</span></h3><div class="description"><p>Set up listeners for native DOM events that may change the widget value.</p><p>Sets up event handlers on the given target DOM node for the given event names which may cause the input value to change completely, such as <code>change</code> events in a select menu. In contrast to update events, such change events will not trigger input value validation but they may cause field dependencies to get re-evaluated and will mark the input widget as dirty.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>targetNode</code></td><td class="type"><span class="param-type">Node</span></td><td class="attributes"></td><td class="description last"><p>Specifies the DOM node on which the event listeners should be registered.</p></td></tr><tr><td class="name"><code>events</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes"><repeatable><br></td><td class="description last"><p>The DOM events for which event handlers should be registered.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="inherited-from bold">Inherited From</dt><dd class="inherited-from"><ul><li><a href="LuCI.ui.AbstractElement.html#setChangeEvents">LuCI.ui.AbstractElement#setChangeEvents</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line288">line 288</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="setPlaceholder"><span class="type-signature"></span>setPlaceholder<span class="signature">(value)</span></h3><div class="description"><p>Set the current placeholder value of the input widget.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>value</code></td><td class="type"><span class="param-type">string</span> |<wbr> <span class="param-type">Array.<string></span> |<wbr> <span class="param-type">null</span></td><td class="description last"><p>The placeholder to set for the input element. Only applicable to text inputs, not to radio buttons, selects or similar.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="inherited-from bold">Inherited From</dt><dd class="inherited-from"><ul><li><a href="LuCI.ui.AbstractElement.html#setPlaceholder">LuCI.ui.AbstractElement#setPlaceholder</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line116">line 116</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="setUpdateEvents"><span class="type-signature"></span>setUpdateEvents<span class="signature">(targetNode, …events)</span></h3><div class="description"><p>Set up listeners for native DOM events that may update the widget value.</p><p>Sets up event handlers on the given target DOM node for the given event names which may cause the input value to update, such as <code>keyup</code> or <code>onclick</code> events. In contrast to change events, such update events will trigger input value validation.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>targetNode</code></td><td class="type"><span class="param-type">Node</span></td><td class="attributes"></td><td class="description last"><p>Specifies the DOM node on which the event listeners should be registered.</p></td></tr><tr><td class="name"><code>events</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes"><repeatable><br></td><td class="description last"><p>The DOM events for which event handlers should be registered.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="inherited-from bold">Inherited From</dt><dd class="inherited-from"><ul><li><a href="LuCI.ui.AbstractElement.html#setUpdateEvents">LuCI.ui.AbstractElement#setUpdateEvents</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line244">line 244</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="setValue"><span class="type-signature"></span>setValue<span class="signature">(value)</span></h3><div class="description"><p>Set the current value of the input widget.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>value</code></td><td class="type"><span class="param-type">string</span> |<wbr> <span class="param-type">Array.<string></span> |<wbr> <span class="param-type">null</span></td><td class="description last"><p>The value to set the input element to. For simple inputs like text fields or selects, the value should be a - possibly empty - string. Complex widgets such as <code>DynamicList</code> instances may accept string array or <code>null</code> values.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-overrides bold">Overrides</dt><dd class="tag-overrides"><ul><li><a href="LuCI.ui.AbstractElement.html#setValue">LuCI.ui.AbstractElement#setValue</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line3674">line 3674</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="triggerValidation"><span class="type-signature"></span>triggerValidation<span class="signature">()</span><span class="type-signature"> → {boolean}</span></h3><div class="description"><p>Force validation of the current input value.</p><p>Usually input validation is automatically triggered by various DOM events bound to the input widget. In some cases it is required though to manually trigger validation runs, e.g. when programmatically altering values.</p></div><dl class="details"><div class="details-item-container"><dt class="inherited-from bold">Inherited From</dt><dd class="inherited-from"><ul><li><a href="LuCI.ui.AbstractElement.html#triggerValidation">LuCI.ui.AbstractElement#triggerValidation</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line184">line 184</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><dl class="param-type"><dt>Type: </dt><dd><span class="param-type">boolean</span></dd></dl></div><h2 id="type-definitions" class="subsection-title has-anchor">Type Definitions</h2><h3 class="name has-anchor" id=".InitOptions">InitOptions</h3><div class="description"><p>In addition to the <a href="LuCI.ui.AbstractElement.html#.InitOptions"><code>AbstractElement.InitOptions</code></a> the following properties are recognized:</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type"><a href="LuCI.ui.AbstractElement.html#.InitOptions">LuCI.<wbr>ui.<wbr>AbstractElement.<wbr>InitOptions</a></span></li></ul></div><b class="subsection-title">Properties</b><div class="allow-overflow"><table class="props"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>browser</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes"><optional><br></td><td class="default">false</td><td class="description last"><p>Use a file browser mode.</p></td></tr><tr><td class="name"><code>show_hidden</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes"><optional><br></td><td class="default">false</td><td class="description last"><p>Specifies whether hidden files should be displayed when browsing remote files. Note that this is not a security feature, hidden files are always present in the remote file listings received, this option merely controls whether they're displayed or not.</p></td></tr><tr><td class="name"><code>enable_upload</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes"><optional><br></td><td class="default">true</td><td class="description last"><p>Specifies whether the widget allows the user to upload files. If set to <code>false</code>, only existing files may be selected. Note that this is not a security feature. Whether file upload requests are accepted remotely depends on the ACL setup for the current session. This option merely controls whether the upload controls are rendered or not.</p></td></tr><tr><td class="name"><code>enable_remove</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes"><optional><br></td><td class="default">true</td><td class="description last"><p>Specifies whether the widget allows the user to delete remove files. If set to <code>false</code>, existing files may not be removed. Note that this is not a security feature. Whether file delete requests are accepted remotely depends on the ACL setup for the current session. This option merely controls whether the file remove controls are rendered or not.</p></td></tr><tr><td class="name"><code>directory_create</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes"><optional><br></td><td class="default">false</td><td class="description last"><p>Specifies whether the widget allows the user to create directories.</p></td></tr><tr><td class="name"><code>directory_select</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes"><optional><br></td><td class="default">false</td><td class="description last"><p>Specifies whether the widget shall select directories only instead of files.</p></td></tr><tr><td class="name"><code>enable_download</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes"><optional><br></td><td class="default">false</td><td class="description last"><p>Specifies whether the widget allows the user to download files.</p></td></tr><tr><td class="name"><code>root_directory</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes"><optional><br></td><td class="default">/etc/luci-uploads</td><td class="description last"><p>Specifies the remote directory the upload and file browsing actions take place in. Browsing to directories outside the root directory is prevented by the widget. Note that this is not a security feature. Whether remote directories are browsable or not solely depends on the ACL setup for the current session.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line3065">line 3065</a></li></ul></dd></div></dl></article></section></div></div></div><div class="search-container" id="PkfLWpAbet" style="display:none"><div class="wrapper" id="iCxFxjkHbP"><button class="icon-button search-close-button" id="VjLlGakifb" aria-label="close search"><svg><use xlink:href="#close-icon"></use></svg></button><div class="search-box-c"><svg><use xlink:href="#search-icon"></use></svg> <input type="text" id="vpcKVYIppa" class="search-input" placeholder="Search..." autofocus></div><div class="search-result-c" id="fWwVHRuDuN"><span class="search-result-c-text">Type anything to view search result</span></div></div></div><div class="mobile-menu-icon-container"><button class="icon-button" id="mobile-menu" data-isopen="false" aria-label="menu"><svg><use xlink:href="#menu-icon"></use></svg></button></div><div id="mobile-sidebar" class="mobile-sidebar-container"><div class="mobile-sidebar-wrapper"><a href="/" class="sidebar-title sidebar-title-anchor">LuCI Documentation</a><div class="mobile-nav-links"><div class="github-home navbar-item"><a id="" href="https://github.com/openwrt/luci" target="">GitHub Project Page</a></div></div><div class="mobile-sidebar-items-c"><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-tutorials"><div>Tutorials</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="tutorial-JsonRpcHowTo.html">Using JSON RPC daemon</a></div><div class="sidebar-section-children"><a href="tutorial-Modules.html">Modules</a></div><div class="sidebar-section-children"><a href="tutorial-ThemesHowTo.html">Making Themes</a></div><div class="sidebar-section-children"><a href="tutorial-i18n.html">Internationalisation - i18n</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-modules"><div>Modules</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="LuCI.module_cbi.html">cbi</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="LuCI.html">LuCI</a></div><div class="sidebar-section-children"><a href="LuCI.baseclass.html">baseclass</a></div><div class="sidebar-section-children"><a href="LuCI.dom.html">dom</a></div><div class="sidebar-section-children"><a href="LuCI.form.html">form</a></div><div class="sidebar-section-children"><a href="LuCI.form.AbstractElement.html">AbstractElement</a></div><div class="sidebar-section-children"><a href="LuCI.form.AbstractSection.html">AbstractSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.AbstractValue.html">AbstractValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.Button.html">Button</a></div><div class="sidebar-section-children"><a href="LuCI.form.DirectoryPicker.html">DirectoryPicker</a></div><div class="sidebar-section-children"><a href="LuCI.form.DummyValue.html">DummyValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.DynamicList.html">DynamicList</a></div><div class="sidebar-section-children"><a href="LuCI.form.FileUpload.html">FileUpload</a></div><div class="sidebar-section-children"><a href="LuCI.form.Flag.html">Flag</a></div><div class="sidebar-section-children"><a href="LuCI.form.GridSection.html">GridSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.HiddenValue.html">HiddenValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.JSONMap.html">JSONMap</a></div><div class="sidebar-section-children"><a href="LuCI.form.ListValue.html">ListValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.Map.html">Map</a></div><div class="sidebar-section-children"><a href="LuCI.form.MultiValue.html">MultiValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.NamedSection.html">NamedSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.RangeSliderValue.html">RangeSliderValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.RichListValue.html">RichListValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.SectionValue.html">SectionValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.TableSection.html">TableSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.TextValue.html">TextValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.TypedSection.html">TypedSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.Value.html">Value</a></div><div class="sidebar-section-children"><a href="LuCI.fs.html">fs</a></div><div class="sidebar-section-children"><a href="LuCI.headers.html">headers</a></div><div class="sidebar-section-children"><a href="LuCI.network.html">network</a></div><div class="sidebar-section-children"><a href="LuCI.network.Device.html">Device</a></div><div class="sidebar-section-children"><a href="LuCI.network.Hosts.html">Hosts</a></div><div class="sidebar-section-children"><a href="LuCI.network.Protocol.html">Protocol</a></div><div class="sidebar-section-children"><a href="LuCI.network.WifiDevice.html">WifiDevice</a></div><div class="sidebar-section-children"><a href="LuCI.network.WifiNetwork.html">WifiNetwork</a></div><div class="sidebar-section-children"><a href="LuCI.network.WifiVlan.html">WifiVlan</a></div><div class="sidebar-section-children"><a href="LuCI.poll.html">poll</a></div><div class="sidebar-section-children"><a href="LuCI.request.html">request</a></div><div class="sidebar-section-children"><a href="LuCI.request.poll.html">poll</a></div><div class="sidebar-section-children"><a href="LuCI.response.html">response</a></div><div class="sidebar-section-children"><a href="LuCI.rpc.html">rpc</a></div><div class="sidebar-section-children"><a href="LuCI.session.html">session</a></div><div class="sidebar-section-children"><a href="LuCI.uci.html">uci</a></div><div class="sidebar-section-children"><a href="LuCI.ui.html">ui</a></div><div class="sidebar-section-children"><a href="LuCI.ui.AbstractElement.html">AbstractElement</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Checkbox.html">Checkbox</a></div><div class="sidebar-section-children"><a href="LuCI.ui.ComboButton.html">ComboButton</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Combobox.html">Combobox</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Dropdown.html">Dropdown</a></div><div class="sidebar-section-children"><a href="LuCI.ui.DynamicList.html">DynamicList</a></div><div class="sidebar-section-children"><a href="LuCI.ui.FileUpload.html">FileUpload</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Hiddenfield.html">Hiddenfield</a></div><div class="sidebar-section-children"><a href="LuCI.ui.RangeSlider.html">RangeSlider</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Select.html">Select</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Textarea.html">Textarea</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Textfield.html">Textfield</a></div><div class="sidebar-section-children"><a href="LuCI.ui.changes.html">changes</a></div><div class="sidebar-section-children"><a href="LuCI.ui.menu.html">menu</a></div><div class="sidebar-section-children"><a href="LuCI.ui.tabs.html">tabs</a></div><div class="sidebar-section-children"><a href="LuCI.validation.html">validation</a></div><div class="sidebar-section-children"><a href="LuCI.validation.Validator.html">Validator</a></div><div class="sidebar-section-children"><a href="LuCI.validation.ValidatorFactory.html">ValidatorFactory</a></div><div class="sidebar-section-children"><a href="LuCI.view.html">view</a></div><div class="sidebar-section-children"><a href="LuCI.xhr.html">xhr</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-externals"><div>Externals</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="external-String.html">String</a></div></div></div><div class="mobile-navbar-actions"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#dark-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div></div></div><script type="text/javascript" src="scripts/core.min.js"></script><script src="scripts/search.min.js" defer="defer"></script><script src="scripts/third-party/fuse.js" defer="defer"></script><script type="text/javascript">var tocbotInstance=tocbot.init({tocSelector:"#eed4d2a0bfd64539bb9df78095dec881",contentSelector:".main-content",headingSelector:"h1, h2, h3",hasInnerContainers:!0,scrollContainer:".main-content",headingsOffset:130,onClick:bringLinkToView})</script></body></html> |