FileField
A file input field that wraps the native <input type="file" /> element. It allows users to browse and select files from their device. Configure multiple to allow selecting more than one file, and use accept to restrict which file types are offered. The selected files are available via the files property. For a more polished file selection experience with drag-and-drop support, consider using FilePicker instead.
const fileField = new FileField({
label : 'Attachment',
accept : '.pdf,.docx',
multiple : true,
appendTo : document.body,
onChange({ value }) {
console.log('Selected files:', fileField.files);
}
});
Useful configs and properties
| Config / Property | Description |
|---|---|
| multiple | Allow selecting multiple files |
| accept | Comma-separated list of accepted file extensions or MIME types |
| files | The FileList of selected files (read-only) |
| label | Label text displayed beside the field |
See also
- FilePicker - A styled file picker with drag-and-drop support
- Field - Base field class with label and validation
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
Comma-separated list of file extensions or MIME type to accept. E.g. ".jpg,.png,.doc" or "image/*". Null by default, allowing all files.
-
Set to
trueto allow picking multiple files. Note that when set to a truthy value, the field is set to accept multiple files, but the value returned will be an empty string since this is what is rendered into the HTML.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of FileField class, or subclass thereof.
-
Returns list of selected files
-
Identifies an object as an instance of FileField class, or subclass thereof.
Functions
Functions are methods available for calling on the class-
Clears field value
-
pickFile( )internal
Opens browser file picker
CSS variables
CSS variables that can be set to adjust appearance| Name | Description |
|---|---|
| --b-file-field-button-background | Button background |
| --b-file-field-button-color | Button color |