File Compopnent: More Display Variants, Validation, Event, and Method Usage Examples
Category: ExamplesThe 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.
Using Tools
The text field toolbox can be set via the tools attribute. Simply adding the tools attribute or setting tools=true will enable the default clear button.
Customizing Borders
We can use CSS variables to customize the outer border of the file input.
Event Listeners
Since the component contains a non-hidden file field, it has all file field events (input, change, etc.).
Since passing parameters with addEventListener is cumbersome, an additional set of listener events is provided.
Custom Preview Display
You can use the change or changed events to implement file previews. The key steps are:
For single file previews, you can place them after the input field.
Automatic Preview
Operation Methods
Built-in common methods include reset(), clear(), and set(data), along with input-specific blur and focus methods. Based on these methods, the component provides corresponding listener events.
When testing validation, be sure to use the name attribute to ensure uniqueness within the form.
Using Validation
Form validation is handled separately. For required field validation, simply add the oc-valid="trigger:'change'" attribute (must use change trigger). For detailed usage please click here.
When testing validation, be sure to use the name attribute to ensure uniqueness within the form.
Using Cache
To cache data when modifying element attributes or values (for restoring on page reload), use the stor-name attribute. Ensure this value is unique in browser storage.
