FileInputArea

Introduction

FileInputArea is a visual zone for uploading files, either through drag-and-drop or by clicking to select a file. It is responsible only for the upload area itself. Labels, descriptions, and external feedback are added using other components.

FileInputArea item represents a single uploaded file, including its name, status, and available actions (remove & retry). It's used together with multi-file upload to display uploaded files.

Variant

• Single file upload: When uploading a single file, all interaction and feedback take place within the FileInputArea itself. After the file is uploaded, the file name and any relevant status are displayed directly in the component.

• Multi-file upload: The FileInpuArea remains in its default state when uploading multiple files. Uploaded files are displayed below the field as individual items, each showing its name and status. This is the out-of-the-box behavior, but you are free to customize it to fit the service or context in which it's used.

  Learn more in the Single file upload and Multiple file upload documentation.

Interactive demo

Try the interactive demo below to explore the FileInputArea component.