Opening the file dialog

Open the native file picker from your own button with open().

Open the native file picker from your own button, instead of the dropzone’s default click-to-open.

Drag files here — clicking the dropzone itself does nothing

TSX

import { useMediaDrop } from "react-mediadrop";

export function FileDialogExample() {
	const { acceptedFiles, getRootProps, getInputProps, open } = useMediaDrop({
		noClick: true,
		noKeyboard: true,
	});

	return (
		<div className="space-y-3">
			<div
				{...getRootProps()}
				className="rounded-lg border-2 border-dashed border-zinc-300 px-6 py-10 text-center dark:border-zinc-700"
			>
				<input {...getInputProps()} />
				<p>Drag files here — clicking the dropzone itself does nothing</p>
				<button type="button" onClick={open}>
					Choose files
				</button>
			</div>
			<ul className="space-y-2">
				{acceptedFiles.map((file) => (
					<li
						key={file.id}
						className="rounded-md border border-zinc-200 px-3 py-2 text-sm dark:border-zinc-800"
					>
						{file.name} — {file.size.toLocaleString()} bytes
					</li>
				))}
			</ul>
		</div>
	);
}

noClick and noKeyboard turn off the dropzone’s own click-to-open and Space/Enter-to-open behavior, so open() is the only way in. Most browsers require the call to originate from a direct user interaction like a click — calling it from an effect or a timer won’t open the picker.