Home›Docs›Form›File Component

File Component

Last updated: 4 months ago

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.

Upload Component: Feature Details, Direct Cloud Upload, Events and Methods Demo Examples4 months ago Upload Component4 months ago Upload Library4 months ago File Compopnent: More Display Variants, Validation, Event, and Method Usage Examples4 months ago File Component4 months ago

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')})

Tags: Native, Vanilla, Web Components

Input Component: More Display Variants, Validation, Event, and Method Usage Examples

4 months ago

File Compopnent: More Display Variants, Validation, Event, and Method Usage Examples