FileDrop
Allows user to drop or upload a file easily.
version
5.6.1
install
yarn add @welcome-ui/file-drop
usage
import { FileDrop } from '@welcome-ui/file-drop'
About #
FileDrop uses render props to give you more flexibility on what to render at each state change:
isDefault
: No file uploaded and no user interactionisHoverAccept
: File is being dragged over and matches theaccept
stringisHoverReject
: File is being dragged over but does not match theaccept
string
You also have access to:
openFile
: To open the native file chooser dialog boxfileUrl
: URL of file if one has been opened/dropped (to show a preview)
Usage #
By default, accept
: is set to { "image/*": [] }
. See more about showOpenFilePicker and media type.
Custom wordings #
By default:
title
: is set to"Add file"
hint
: is set to"Drag & drop a file here or"
fileButtonText
: is set to"Browse file"
previewButtonText
: is set to"Preview"
You can override translations with a wordings
object.
With preview #
Show preview if value exists #
Image #
Other files #
File without type #
Sometime in the url we don't have the type of the file, you can override with forceFileType
set to image
, audio
or video
.
Disabled #
Properties #
FileDrop #
Name | Type(s) | Default | Required |
---|---|---|---|
accept | Accept Pass a comma-separated string of file types e.g. "image/png" or "image/png,image/jpeg" | {
image/*: [],
} | |
isClearable | Boolean | ||
isEditable | Boolean | ||
forceFileType | "audio" "video" "image" | ||
handleAddFile | (event: DropEvent | CreateEvent) => void | ||
handleRemoveFile | (event: DropEvent | CreateEvent) => void | ||
name | string | ||
onBlur | () => void | ||
onChange | (event: DropEvent | CreateEvent) => void | ||
onError | ((event?: string) => void) & ((err: Error) => void) | ||
value | string FileWithPreview | ||
wordings | WordingsType Pass an object with optional fields title, hint, fileButtonText and/or previewButtonText (string or JSX.Element) |
Packages #
Dependencies #
Peer dependencies #
Previous
FieldNext
FileUpload