Skip to content

file_selector

Allows uploading a file content.

The upload can be triggered by pressing a button, or drag-and-dropping a file on top of the control.

Properties

Name Type Default Description
content(★) str
dynamic

The path or the list of paths of the uploaded files.

label str

The label of the button.

on_action Callback

The name of the function that will be triggered.
All the parameters of that function are optional:

  • state (State): the state instance.
  • id (optional[str]): the identifier of the button.
  • payload (dict): a dictionary that contains the key "action" set to the name of the action that triggered this callback.

multiple bool False

If set to True, multiple files can be uploaded.

extensions str ".csv,.xlsx"

The list of file extensions that can be uploaded.

drop_message str "Drop here to Upload"

The message that is displayed when the user drags a file above the button.

active bool
dynamic
True

Indicates if this component is active.
An inactive component allows no user interaction.

id str

The identifier that will be assigned to the rendered HTML component.

properties dict[str, any]

Bound to a dictionary that contains additional properties for this element.

class_name str
dynamic

The list of CSS class names that will be associated with the generated HTML Element.
These class names will be added to the default taipy-<element_type>.

hover_text str
dynamic

The information that is displayed when the user hovers over this element.

(★)content is the default property for this visual element.

Styling

All the file selector controls are generated with the "taipy-file_selector" CSS class. You can use this class name to select the file selector controls on your page and apply style.

Usage

Default behavior

The variable specified in content is populated by a local filename when the transfer is completed.

Definition

<|{content}|file_selector|>
<taipy:file_selector>{content}</taipy:file_selector>
import taipy.gui.builder as tgb
...
tgb.file_selector("{content}")

Standard configuration

The label property can be set to a label shown besides the standard icon.
The function name provided as on_action is called when the transfer is completed.
The extensions property can be used as a list of file name extensions that is used to filter the file selection box. This filter is not enforced: the user can select and upload any file.
Upon dragging a file over the button, the value of the drop_message property is displayed as a temporary label for the button.

Definition

<|{content}|file_selector|label=Select File|on_action=function_name|extensions=.csv,.xlsx|drop_message=Drop Message|>
<taipy:file_selector label="Select File" on_action="function_name" extensions=".csv,.xlsx" drop_message="Drop Message">{content}</taipy:file_selector>
import taipy.gui.builder as tgb
...
tgb.file_selector("{content}", label="Select File", on_action=function_name, extensions=".csv,.xlsx", drop_message="Drop Message")

Multiple files upload

The user can transfer multiple files at once by setting the multiple property to True.

Definition

<|{content}|file_selector|multiple|>
<taipy:file_selector multiple>{content}</taipy:file_selector>
import taipy.gui.builder as tgb
...
tgb.file_selector("{content}", multiple=True)