Skip to content

Hooks and Components

useReactDropzoneVV

Return values

nameType
isDraggingboolean
inputRefReact.RefObject<HTMLInputElement>
openSelector() => void

ReactDropzoneVV

PROPS & METHODS

Prop nameTypeDefaultDescription
childrenReactNode
reactDropzoneVVUseReactDropzoneVVThe return value of useReactDropzoneVV.
inputPropsHTMLProps<HTMLInputElement>
acceptstring""
disabledbooleanfalse
multiplebooleantrue
noClickbooleanfalse
noDragbooleanfalse
onDragEnter(event: DragEvent<HTMLDivElement>) => void
onDragOver(event: DragEvent<HTMLDivElement>) => void
onDragLeave(event: DragEvent<HTMLDivElement>) => void
onDrop(files: File[]) => void
onSelect(props: OnSelectProps) => voidCallbacks when the Drop event occurs and when a file is selected in a dialog.
onError(error: Error) => void

Supplement onSelect

For most applications, two are sufficient: acceptedFiles and fileRejections. Use acceptedFiles if you need a list of accepted files, and use fileRejections if you need a list of rejected files. The fileRejections contains the reason for the rejection.

classifiedFiles is an array containing both acceptedFiles and fileRejections. classifiedFiles is useful, for example, for adding your own custom validations.

Simplified ClassifiedFile type is defined as follows:

ts
export type RejectedCode = "more-than-one-file" | "accept-violations"

export type AcceptedClassifiedFile = {
  status: "accepted"
  file: File
  rejectedCode: undefined
}

export type RejectedClassifiedFile = {
  status: "rejected"
  file: File
  rejectedCode: RejectedCode | string
}

export type ClassifiedFile = AcceptedClassifiedFile | RejectedClassifiedFile

ClassifiedFile is classified as "accepted" or "rejected" depending on its status. How to split an array by status can be seen in the example.

Note that the update may increase the RejectedCode.