WUI logo

FileDrop

Allows user to drop or upload a file easily.

version

5.13.0

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 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:

  • openFile: To open the native file chooser dialog box
  • fileUrl: 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 #
NameType(s)DefaultRequired
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

Field