Log In Sign Up
HomeDocsFormFile Component

File Component

Category: Form
The 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')})

New Launch: 20% Off All Products

Unlock all examples and development resources