Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Navigation

Forms

ButtonButton GroupCheckboxCheckbox GroupClipboard ButtonComboboxEditable DescriptionEditable HeadingFile InputForm FieldIcon ButtonMulti SelectNumber InputRadioSearch InputSelectSliderSlug InputSwitchTag InputTextareaText Input

File Input

File input lets users upload files from their computer.

#

#

#

#

#

#

Simulated upload progress is automatically shown when onUpload event handler returns a promise.

If onUpload takes less than 200ms to execute, upload progress won't be displayed.

#

When an uploaded file doesn't pass some additional validation, throw a FileUploadError with an error message that will be displayed in FileInput. Try uploading any file in the example below to see how it works.

When onUpload throws any other error, FileInput will show a generic error message.

#

When user is not allowed to upload a file, FileInput can be disabled.

#

#

Inherits margin props.

NameDefaultDescription
isDisabledfalseboolean

Determines whether file input is disabled.

accept

string[]

List of file extensions to accept in this file input.

maxSize1000 * 1000 * 10 (10 megabytes)number

Maximum file size.

onUpload

(file: File) => Promise<void> | void

Event handler when user has selected a file.

On this page

  • Example
  • Usage
  • Generic
  • Images
  • Credentials
  • Upload progress
  • Error handling
  • Disabled
  • Props
  • FileInput