FileDrop

Install and import

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)

Default

By default, accept: is set to image/*, see more about media type.

Add file

Drag & drop a file here or

Files must be < 2MB

Show preview if value exists

Image

Add file

Drag & drop a file here or

Files must be < 2MB

Other files

Add file

Drag & drop a file here or

Files must be < 2MB

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.

Add file

Drag & drop a file here or

Add file

Drag & drop a file here or

Disabled

Add file

Drag & drop a file here or

Bare example

Add file

Drag & drop a file here or

Properties

FileDrop

NameType(s)DefaultRequired
accept
string

image/*
children
func
Preview
disabled
bool
forceFileType
image
audio
video
handleAddFile
func
handleRemoveFile
func
isClearable
bool
isEditable
bool
maxSize
number
2000000
multiple
bool
name
string
onBlur
func
onChange
func
onError
func
onFocus
func
title
string | node
value
string | object

Dependencies

Peer dependencies