File Component
Category: FormThe FILE custom tag is an encapsulation of the native file tag. In addition to maintaining the functionality of single and multiple file selection, it also adds support for a toolbox, file quantity limit prompts, and quantity validation.
Basic Usage
Since native type=file input fields are visually unappealing and difficult to align with other form fields, we've created a simple file component wrapper that maintains functionality while providing visual consistency.
Simply use an empty oc-file
tag in your page to represent a single-file input field.
- Output
- HTML
Multiple Selection
To enable multiple file selection, simply add the multiple
attribute like with native file inputs.
- Output
- HTML
After selecting multiple files, the tips text will begin with xxx files:
. You can modify this template using the lang.multi
attribute.
- Output
- HTML
Acceptable File Types
To specify allowed file types, add the accept
attribute like with native file inputs.
- Output
- HTML
Disabled and Readonly
These boolean attributes are supported with the same behavior as native file inputs.
- Output
- HTML
Using Label
While placeholder
can provide hints, you can also use the label
attribute to display a field title for better clarity.
- Output
- HTML
Getting Values
You can access component properties like name
, value
, disabled
, readOnly
, and multiple
just like with native elements.
Note: The O
in readOnly
is uppercase. Also, while native file inputs' value
only returns filenames, this component's value
returns an array of file data since submitting filenames alone is meaningless - submitting the actual files is what matters.
- Output
- HTML
- JS
-
-
-
let vals = document.querySelector('#vals'); getvals.onclick=function(){ this.innerHTML = `name:${vals.name},disabled:${vals.disabled},readOnly:${vals.readOnly},multiple:${vals.multiple},Check console for value`; console.log(vals.value) }
Placeholder Text
The file component's placeholder text uses the placeholder
attribute, with a default value of Choose files...
. To customize, either use the placeholder attribute or place the text directly inside the tag.
- Output
- HTML
-
Please choose your files... -
Size Options
The file field component's size can be set via the size
attribute, supporting sm
, md
(default), and lg
sizes.
- size=sm: Height 24px (2.4rem)
- size=md: Height 40px (4.0rem)
- size=lg: Height 56px (5.6rem)
- Output
- HTML
Common Methods
Common component methods:
set
: Set properties (takes key-value pairs or array)reset
: Reset properties (no params)clear
: Clear properties and values (no params)
Basic usage: CompElem.reset()
Common Events
Common component events:
connected
: Component connected (no params)disconnected
: Component disconnected (no params)adopted
: Component moved (no params)set
: Property set (receives value)cleared
: Property cleared (no params)reset
: Property reset (no params)
Basic usage: CompElem.on('connected',()=>{console.log('connected')})