FileDrop

Allows user to drop or upload a file easily.

version

5.0.0-alpha.33

install

yarn add @welcome-ui/file-drop

usage

import { FileDrop } from '@welcome-ui/file-drop'

FileDrop uses render props to give you more flexibility on what to render at each state change:

isDefault: No file uploaded and no user interaction
isHoverAccept: File is being dragged over and matches the accept string
isHoverReject: File is being dragged over but does not match the accept string

You also have access to:

By default, accept: is set to { "image/*": [] }. See more about showOpenFilePicker and media type.

By default:

You can override translations with a wordings object.

Sometime in the url we don't have the type of the file, you can override with forceFileType set to image, audio or video.

Name	Type(s)	Default
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)