The File Picker component allows you to select files from your device.

👍
How To: File Picker
Please refer to 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 view the properties common to most UI components, please refer to the General components document.

The File Picker component has the following properties:

Property Name	Property Description
Name	Name of the input when used in a Form.
Type	Click to select the type of button that invokes the file selection dialog (Button or Image).
Files Count	When set to True (default), the files count message will be displayed.
Files List	When set to True (default), the selected files list will be displayed.
Show Remove Icon	When set to True (default), the Remove File Icon will be displayed.
Multiple	When 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 custom file types, for example: `.jpg`, `.png`.

🚧
Adding Custom Styles
If you need to add custom styles for this component, provide them in a custom SCSS file:
aio-file-picker.myClass {...}.
For example:
aio-file-picker.myClass { border: 2px solid red; }.
Styles provided in the SCSS panel will not work for this component.

File Picker Button

The File Picker Button component has the following property under the Common tab:

Property Name	Property Description
Button Text	Text displayed on 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 by 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 by using the Color-picker.

🚧
Adding Custom Styles
If you need to add custom styles for this component, provide them in a custom SCSS file:
aio-file-picker.myClass > ion-button {...}.
Styles provided in the SCSS panel will not work for this component.

File Picker Image

The File Picker Image component has the following property under the Common tab:

Property Name	Property Description
Image	Click the Change button to select an uploaded image from the Media Manager.

Styles Properties

The File Picker Image component has the following Styles properties:

Property Name	Property Description
Height	Set the height of the image in `px`, `%`, `em`, `vh`, and `vw`.
Width	Set the width of the 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.

Property Name

Property Description

Height

Set the height of the image in px, %, em, vh, and vw.

Width

Set the width of the 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 them in a custom SCSS file:
aio-file-picker.myClass > img {...}.
Styles provided in the SCSS panel will not work for this component.

File Picker Files Counter

The File Picker Files Counter component has the following properties:

Property Name	Property Description
Text	Enter custom text instead of `file(s)`. For this property, I18n is enabled.
No File Text	Label displayed when no files are selected. If not set, the default label is `No file chosen`. For this property, I18n is enabled.

Styles Properties

The File Picker Files Counter component has the following Styles properties:

Property Name	Property Description
Text Color	Set the CSS color of the text by selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or by using the Color-picker.
Font Size	Set the font size in `px`, `%`, `em`, `vh`, and `vw`.
Font Style	Set the font style following CSS font-style options (Normal or Italic).

🚧
Adding Custom Styles
If you need to add custom styles for this component, provide them in a custom SCSS file:
aio-file-picker.myClass > .files-count {...}.
Styles provided in the SCSS panel will not work for this component.

File Picker Files List

The File Picker Files List component has the following 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 by using the Color-picker.
Font Size	Set the font size in `px`, `%`, `em`, `vh`, and `vw`.
Font Style	Set the font style following CSS font-style options (Normal or Italic).

🚧
Adding Custom Styles
If you need to add custom styles for this component, provide them in a custom SCSS file, for example:

For file list wrapper styles:
aio-file-picker.myClass > .files-list {...}

For individual file label styles:
aio-file-picker.myClass > .files-list .file-info {...}.

Styles provided in the SCSS panel will not work for this component.

File Picker Remove File Icon

The File Picker Remove File Icon component has the following Styles properties:

Property Name	Property Description
Size	The icon size. Possible values are Small or Large.
Icon Color	Set the icon color by selecting a CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or by using the Color-picker.

🚧
Adding Custom Styles
If you need to add custom styles for this component, provide them in a custom SCSS file:
aio-file-picker.myClass .files-list .remove-icon {...}.
Styles provided in the SCSS panel will not work for this component.