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/video-uploader-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
styles	DropZoneStyles	none	Slot map for default inner content (see Slots below)
children	ReactNode | ((state: DropZoneRenderProps) => ReactNode)	none	Replaces the default inner content entirely (see Render function)

Slots

Pass a styles slot map to theme the default inner content without replacing it. Slots merge over defaults; the style/activeStyle props on the root container still apply on top. See Theming for the canonical merge-order explanation.

Slot	Targets
root	The outer drop-zone container (merged on top of style)
activeRoot	Container styles applied during drag hover (merged on top of activeStyle)
icon	The default upload icon
primaryText	The “Drop files here” headline
browseText	The “browse” link inside the headline
supportingText	The supporting text below the headline

<DropZone
  styles={{
    root: { background: "#0f172a", borderColor: "#334155" },
    primaryText: { color: "white" },
    browseText: { color: "#38bdf8" },
    supportingText: { color: "#94a3b8" },
  }}
  supportingText="MP4, WebM, MOV, up to 500 MB"
/>

If slots aren’t enough (e.g., you want an entirely different layout), use the render function to replace the inner content wholesale.

DropZone is web-only; React Native uses the platform-native file picker instead of a drop target.

Render function

For full control over the drop zone content (replaces the default inner content entirely; slots no longer apply):

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/video-uploader-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.