DropZone

DropZone provides a drag-and-drop target and file-picker button for adding video files. It reads canAddMore from UploadProvider context and disables itself automatically when the file limit is reached.

Drop videos here or browse

MP4, WebM, MOV — up to 500 MB

import { DropZone } from "@hyperserve/upload-react";

<DropZone supportingText="MP4, WebM, MOV, up to 500 MB" />

Props

Prop	Type	Default	Description
accept	string	"video/*"	MIME type filter for the file input
multiple	boolean	true	Allow multiple files
disabled	boolean	false	Disable the drop zone (also disables when canAddMore is false)
supportingText	ReactNode	none	Help text below the main label
style	CSSProperties	none	Base styles
activeStyle	CSSProperties	none	Merged during drag hover
className	string	none	Base class
activeClassName	string	none	Appended during drag hover
children	ReactNode | ((state: DropZoneRenderProps) => ReactNode)	none	Custom content or render function

Render function

For full control over the drop zone content:

Custom drop zone UISelect Files

<DropZone>
  {({ isDragging, openPicker }) => (
    <div>
      {isDragging ? "Release to upload" : "Custom drop zone UI"}
      <button onClick={openPicker}>Select Files</button>
    </div>
  )}
</DropZone>

DropZoneRenderProps

import type { DropZoneRenderProps } from "@hyperserve/upload-react";

type DropZoneRenderProps = {
  isDragging: boolean;
  openPicker: () => void;
};

Styling

The default drop zone uses inline styles from the shared theme. Override with style/className or use the render function for complete control.