Logo

AueraUI

Docs

Components

Components

File Upload

Allows users to select and upload files effortlessly.

Logo

Multiple

Use the multiple prop to upload multiple files

Accepts

With the accept prop, you decide what file types you want to accept, and you also get auto-suggestions.

Max File

Use the maxFile prop to limit the number of files that can be uploaded.

Max Size

Use the maxSize prop to set the maximum file size that can be uploaded.

DropZone

You can also use the FileUploadDropzone for a more stylish upload interface.

Drag & Drop Files Here or Click to upload

Supports multiple file types. Click to browse or drag files into the dropzone.

Show Size

Use the showSize prop to display the file size.

RemoveAble

With the removeAble prop, you can remove files from the file list. This is only available for multiple files.

onFileUpload

Use the onFileUpload function, to receive the file together with catchFile .

FileUpload

multiple

Type:

boolean

Allows multiple file selection.

Default:

false
onFileUpload

Type:

function

Callback function triggered when files are uploaded.

Default:

maxFiles

Type:

number

Limits the number of files that can be uploaded.

Default:

10
mode

Type:

"light" | "dark"

Defines the theme mode applied to all upload components.

Default:

"system"

FileUploadTrigger

accept

Type:

FileType[]

Specifies the file types that can be uploaded.

Default:

["image/png, image/jpeg"]
maxSize

Type:

number

Defines the maximum file size (in MB) allowed for upload.

Default:

32
exceedMessage

Type:

string

Custom warning message displayed when file size exceeds the limit.

Default:

File size exceeds the $maxSizeMB limit!
disabled

Type:

boolean

Disables the file upload functionality when set to true.

Default:

false

FileUploadList

showSize

Type:

boolean

Displays the file size next to the uploaded file.

Default:

false
removeAble

Type:

boolean

Allows users to remove files from the upload list (only for multiple files).

Default:

false
classNames

Type:

object

Custom class names for styling the file list.

Default:

Properties:

name

Type:

string

Class name for the file name.

Default:

root

Type:

string

Class name for the file container.

Default:

FileUploadDropZone

label

Type:

string

Text displayed as the main label for the dropzone.

Default:

description

Type:

string

Additional text displayed below the label to provide more information.

Default:

classNames

Type:

object

Custom class names for styling different parts of the dropzone.

Default:

Properties:

root

Type:

string

Class for the root dropzone container.

Default:

label

Type:

string

Class for the dropzone label.

Default:

description

Type:

string

Class for the dropzone description text.

Default:

accept

Type:

FileType[]

Specifies the file types that can be uploaded.

Default:

["image/png, image/jpeg"]
maxSize

Type:

number

Defines the maximum file size (in MB) allowed for upload.

Default:

32
exceedMessage

Type:

string

Custom warning message displayed when file size exceeds the limit.

Default:

File size exceeds the $maxSizeMB limit!
disabled

Type:

boolean

Disables the dropzone.

Default:

false