File Picker
Overview of the File Picker Component
The File Picker component allows you to select files.
How To: File Picker
Please check the detailed instructions on how to set up the File Picker component here.
Properties
Important Note!
This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.
The File Picker component has the following common properties:
| Property Name | Property Description |
|---|---|
| Name | Name of the input if used in a Form. |
| Type | Click to select the type of the button to invoke the file select dialog (Button or Image). |
| Files Count | If set to True (default), files count message will be shown. |
| Files List | If set to True (default), selected files list will be shown. |
| Show Remove Icon | If set to True (default), Remove File Icon will be shown. |
| Multiple | If set to True, multiple files can be selected. |
| File Types | Comma-separated list of one or more file types. There is a predefined list of file types: Image, Video, Audio, Document, Archive; you can also add your own types. For example: .jpg, .png. |
Adding Custom Styles
If you need to add custom styles for this component, provide it in a custom SCSS file:
aio-file-picker.myClass {...}.For example:
aio-file-picker.myClass { border: 2px solid red; }.Styles provided on the SCSS panel won't work for this component.
File Picker Button
The File Picker Button component has the following common properties:
The File Picker Button component has the following property under the Common tab:
| Property Name | Property Description |
|---|---|
| Button Text | Text of the button. For this property, I18n is enabled. |
Styles Properties
The File Picker Button component also has the following Styles properties:
| Property Name | Property Description |
|---|---|
| Text Color | Set the CSS color of the button text by selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker. |
| Button Color | Set the CSS button color by selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker. |
Adding Custom Styles
If you need to add custom styles for this component, provide it in a custom SCSS file:
aio-file-picker.myClass > ion-button {...}.Styles provided on the SCSS panel won't work for this component.
File Picker Image
The File Picker Image component has the following common properties:
The File Picker Image component has the following property under the Common tab:
| Property Name | Property Description |
|---|---|
| Image | Click the Change button to select the uploaded image from Media Manager. |
Styles Properties
The File Picker Image component has the following Styles properties:
| Property Name | Property Description |
|---|---|
| Height | Set the height of an image in px, %, em, vh, and vw. |
| Width | Set the width of an image in px, %, em, vh, and vw. |
| Margin | Set the image margin area in px, %, em, vh, and vw:All sides, Top, Right, Bottom, Left. |
Adding Custom Styles
If you need to add custom styles for this component, provide it in a custom SCSS file as:
aio-file-picker.myClass > img {...}.Styles provided on the SCSS panel won't work for this component.
File Picker Files Counter
The File Picker Files Counter component has the following common properties:
Styles Properties
The File Picker Counter component has the following Styles properties:
| Property Name | Property Description |
|---|---|
| Text Color | Set the CSS color of the image text by selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker. |
| Font Size | Set the font size in px, %, em, vh, and vw. |
| Font Style | Set the font style; follows the CSS font-style options (Normal or Italic). |
Adding Custom Styles
If you need to add custom styles for this component, provide it in a custom SCSS file:
aio-file-picker.myClass > .files-count {...}.Styles provided on the SCSS panel won't work for this component.
File Picker Files List
The File Picker Files List component has the following properties:
Styles Properties
| Property Name | Property Description |
|---|---|
| Text Color | Set the CSS text color by selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker. |
| Font Size | Set the font size in px, %, em, vh, and vw. |
| Font Style | Set the font style; follows the CSS font-style options (i.e. Normal, Italic). |
Adding Custom Styles
If you need to add custom styles for this component, provide it in a custom SCSS file, for example:
for file list wrapper styles:
aio-file-picker.myClass > .files-list {...}for each file label styles:
aio-file-picker.myClass > .files-list .file-info {...}.Styles provided on the SCSS panel won't work for this component.
File Picker Remove File Icon
The File Picker Remove File Icon component has the following properties:
Styles Properties
| Property Name | Property Description |
|---|---|
| Size | The icon size. Possible values are Small or Large. |
| Icon Color | Set the icon color by selecting CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker. |
Adding Custom Styles
If you need to add custom styles for this component, provide it in a custom SCSS file:
aio-file-picker.myClass .files-list .remove-icon {...}.Styles provided on the SCSS panel won't work for this component.
Updated about 5 hours ago