Quickstart

"use client";

import { useMediaDrop } from "react-mediadrop";

export function UploadBox() {
	const {
		getRootProps,
		getInputProps,
		files,
		isDragActive,
		isDragReject,
		open,
		removeFile,
	} = useMediaDrop({
		restrictions: {
			accept: ["image/png", "image/jpeg", "image/webp"],
			maxFiles: 5,
			maxSize: 5 * 1024 * 1024,
		},
	});

	return (
		<div {...getRootProps()}>
			<input {...getInputProps()} />
			<p>{isDragActive ? "Drop it!" : "Drag files here"}</p>

			{files.map((item) => (
				<div key={item.id}>
					{item.name}
					{item.status === "rejected" ? (
						<span>
							{" "}
							— {item.errors.map((error) => error.message).join(", ")}
						</span>
					) : null}
					<button type="button" onClick={() => removeFile(item.id)}>
						Remove
					</button>
				</div>
			))}

			<button type="button" onClick={open}>
				Choose files
			</button>

			{isDragReject ? <p>Some files are not allowed</p> : null}
		</div>
	);
}

"use client";

import { useMediaDrop } from "react-mediadrop";
import { createXhrUploadTransport } from "react-mediadrop/xhr-upload";

// Replace with your own upload route.
const transport = createXhrUploadTransport({ endpoint: "/api/upload" });

export function UploadBox() {
	const {
		getRootProps,
		getInputProps,
		files,
		uploadAll,
		cancelUpload,
		retryUpload,
	} = useMediaDrop({
		restrictions: {
			accept: ["image/png", "image/jpeg", "image/webp"],
			maxFiles: 5,
			maxSize: 5 * 1024 * 1024,
		},
		transport,
		concurrency: 3,
		retries: 2,
	});

	return (
		<div {...getRootProps()}>
			<input {...getInputProps()} />

			{files.map((item) => (
				<div key={item.id}>
					{item.name} — {item.uploadStatus ?? "not queued"}
					{item.progress ? ` (${item.progress.loaded} bytes)` : null}
					{item.uploadStatus === "uploading" ? (
						<button type="button" onClick={() => cancelUpload(item.id)}>
							Cancel
						</button>
					) : null}
					{item.uploadStatus === "error" ? (
						<button type="button" onClick={() => retryUpload(item.id)}>
							Retry
						</button>
					) : null}
				</div>
			))}

			<button type="button" onClick={uploadAll}>
				Upload all
			</button>
		</div>
	);
}