Welcome UI - FileDrop

FileDrop

The FileDrop component allows users to upload files by dragging and dropping them into a designated area or by clicking to select files from their device. It simplifies the file upload process with an intuitive, user-friendly interface, providing visual feedback and handling multiple files. This component is ideal for applications that require easy and efficient file uploads, improving overall user experience.

FileDrop

accept

Accept | undefined = { image/*: [], }

Pass a comma-separated string of file types e.g. "image/png" or "image/png,image/jpeg"

fileName

string

forceFileType

"audio" | "video" | "image"

handleAddFile

(event: CreateEvent | DropEvent) => void

handleRemoveFile

(event: CreateEvent | DropEvent) => void

isClearable

Boolean

isEditable

Boolean

name

string

onBlur

FocusEventHandler<HTMLDivElement> & (() => void)

onChange

FormEventHandler<HTMLDivElement> & ((event: CreateEvent | DropEvent) => void)

onError

ReactEventHandler<HTMLDivElement> & ((event?: string) => void) & ((err: Error) => void)

value

Required

string | FileWithPreview

wordings

WordingsType

Pass an object with optional fields title, hint, fileButtonText and/or previewButtonText (string or JSX.Element)