FileInput

The FileInput is a user interface component that allows users to select files from their device's file system for upload (or processing its content otherwise).

There are two ways to add a file to the input field:

• Clicking on the Browse button and selecting the file in the file browser
• Dragging files from a file browser to the input field.

The text box of the input field is read only.

Properties

acceptsFileType

A list of file types the input controls accepts provided as a string array.

<App>
  <FileInput acceptsFileType="{['.txt', '.jpg']}" />
</App>  

autoFocus (default: false)

If this property is set to true, the component gets the focus automatically when displayed.

buttonIcon

The ID of the icon to display in the button

<App>
  <FileInput buttonIcon="drive" buttonLabel="Let there be drive" />
  <FileInput buttonIcon="drive" />
</App>

buttonIconPosition

This optional string determines the location of the button icon.

Available values: start, end

<App>
  <FileInput buttonIcon="drive" buttonLabel="End" buttonIconPosition="end" />
</App>

Details on different icon positions can be found in the Button icon positions section.

buttonLabel

This property is an optional string to set a label for the button part.

If no label is specified and an icon is set, the button will modify its styling to look like an icon button. By default the label reads Browse.

<App >
  <FileInput />
  <FileInput buttonLabel="I am the button label" />
</App>

buttonPosition

This property determines the position of the button relative to the input field. The default is "end".

Available values: start, end

buttonSize

The size of the button (small, medium, large)

Available values:

<App>
  <FileInput buttonSize="lg" />
</App>

Details on different sizes can be found in the Button sizes section.

buttonThemeColor

The button color scheme (primary, secondary, attention)

Available values: attention, primary, secondary

<App>
  <FileInput buttonThemeColor="secondary" />
</App>

Details on different theme colors can be found in the Button theme colors section.

buttonVariant

The button variant to use

Available values: solid, outlined, ghost

<App>
  <FileInput buttonLabel="outlined" buttonVariant="outlined" />
</App>

Details on different button variants can be found in the Button variants section.

directory (default: false)

This boolean property indicates whether the component allows selecting directories (true) or files only (false).

<App>
  <FileInput directory="true" />
</App>  

enabled (default: true)

This boolean property value indicates whether the component responds to user events (true) or not (false).

<App>
  <FileInput enabled="false" />
</App>

initialValue

This property sets the component's initial value.

label

This property sets the label of the component.

labelBreak (default: false)

This boolean value indicates if the FileInput labels can be split into multiple lines if it would overflow the available label width.

labelPosition (default: "top")

Places the label at the given position of the component.

Available values:

labelWidth

This property sets the width of the FileInput.

multiple (default: false)

This boolean property enables to add not just one (false), but multiple files to the field (true). This is done either by dragging onto the field or by selecting multiple files in the browser menu after clicking the input field button.

<App>
  <FileInput multiple="false" />
  <FileInput multiple="true" />
</App>

placeholder

A placeholder text that is visible in the input field when its empty.

readOnly (default: false)

Set this property to true to disallow changing the component value.

required

Set this property to true to indicate it must have a value before submitting the containing form.

validationStatus (default: "none")

This property allows you to set the validation status of the input component.

Available values:

<App>
  <FileInput />
  <FileInput validationStatus="valid" />
  <FileInput validationStatus="warning" />
  <FileInput validationStatus="error" />
</App>

Events

didChange

This event is triggered when value of FileInput has changed.

Write in the input field and see how the Text underneath it is updated in accordingly.

<App var.field="">
  <FileInput onDidChange="(file) => field = file[0]?.name" />
  <Text value="{field}" />
</App>`

gotFocus

This event is triggered when the FileInput has received the focus.

Clicking on the FileInput in the example demo changes the label text. Note how clicking elsewhere resets the text to the original.

<App>
  <FileInput
    buttonLabel="{focused === true ? 'I got focused!' : 'I lost focus...'}"
    onGotFocus="focused = true"
    onLostFocus="focused = false"
    var.focused="{false}"
  />
</App>

lostFocus

This event is triggered when the FileInput has lost the focus.

(See the example above)

Exposed Methods

focus

This method sets the focus on the FileInput.

<App>
  <HStack>
    <Button label="Focus FileInput" onClick="fileInputComponent.focus()" />
    <FileInput id="fileInputComponent" />
  </HStack>
</App>  

open

This API command triggers the file browsing dialog to open.

<App>
  <HStack>
    <Button label="Open FileInput" onClick="fileInputComponent.open()" />
    <FileInput id="fileInputComponent" />
  </HStack>
</App>

setValue

(NOT IMPLEMENTED YET) You can use this method to set the component's current value programmatically.

value

By setting an ID for the component, you can refer to the value of the field if set. If no value is set, the value will be undefined.

In the example below, select a file using the file browser of the FileInput component and note how the Text component displays the selected file's name:

<App>
  <HStack>
    <Text value="Selected file name: {fileInputComponent.value}" />
    <FileInput id="fileInputComponent" />
  </HStack>
</App>

Styling

The FileInput component does not theme variables directly. However, it uses the Button and TextBox components under the hood. Thus, modifying the styles of both of these components affects the FileInput.

See Button styling and TextBox styling.