@salesforce/webapp-template-feature-react-file-upload-experimental 1.55.0

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/components/FileUpload.tsx

@@ -0,0 +1,83 @@
+import { FileUploadDropZone } from "./FileUploadDropZone";
+import { FileUploadDialog } from "./FileUploadDialog";
+import { LABELS } from "../utils/labels";
+import { useFileUpload } from "../hooks/useFileUpload";
+import { useFileUploadDialog } from "../hooks/useFileUploadDialog";
+
+export interface FileUploadProps {
+	/** MIME types to accept (e.g. image/*). Omit for all files. */
+	accept?: string;
+	/** Whether to allow multiple file selection. Default: false */
+	multiple?: boolean;
+	/** Record Id for FirstPublishLocationId (e.g. Account, Opportunity). When provided, files are linked to this record. Otherwise, current user Id is used. */
+	recordId?: string;
+	/** Called when uploads complete. Receives array of successfully uploaded files with name, size, and contentVersionId. */
+	onUploadComplete?: (files: { name: string; size: number; contentVersionId?: string }[]) => void;
+	onUploadError?: (file: File, error: string) => void;
+	/** Optional CSS class for the wrapper div */
+	className?: string;
+}
+
+/**
+ * File upload component. Renders a drop zone for selecting files, a modal dialog
+ * showing upload progress, and a list of successfully uploaded files. Supports
+ * click-to-select and drag-and-drop. Composes FileUploadDropZone and FileUploadDialog.
+ */
+export function FileUpload({
+	accept,
+	multiple = false,
+	recordId,
+	onUploadComplete,
+	onUploadError,
+	className = "",
+}: FileUploadProps) {
+	const { fileItems, getInputProps, getDropZoneProps, isDragging, reset, cancelFile, allDone } =
+		useFileUpload({
+			accept,
+			multiple,
+			recordId,
+			onUploadComplete,
+			onUploadError,
+		});
+
+	const { dialogOpen, uploadedFileNames, handleOpenChange } = useFileUploadDialog({
+		fileItems,
+		reset,
+	});
+
+	const inputProps = getInputProps();
+	const dropZoneProps = getDropZoneProps();
+
+	return (
+		<div className={["w-fit", className].filter(Boolean).join(" ")}>
+			<div className="flex w-fit flex-col gap-1">
+				<FileUploadDropZone
+					inputProps={inputProps}
+					dropZoneProps={dropZoneProps}
+					isDragging={isDragging}
+				/>
+
+				<FileUploadDialog
+					open={dialogOpen}
+					onOpenChange={handleOpenChange}
+					fileItems={fileItems}
+					onCancelFile={cancelFile}
+					allDone={allDone}
+				/>
+
+				{uploadedFileNames.length > 0 && (
+					<ul
+						className="mt-2 list-inside list-disc space-y-1 text-sm text-gray-700"
+						aria-label={LABELS.uploadedFiles}
+					>
+						{uploadedFileNames.map((name, i) => (
+							<li key={`${name}-${i}`}>{name}</li>
+						))}
+					</ul>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default FileUpload;

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/components/FileUploadDialog.tsx

@@ -0,0 +1,79 @@
+import {
+	Button,
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui";
+import { FileUploadFileItem } from "./FileUploadFileItem";
+import { formatUploadSummary } from "../utils/fileUploadUtils";
+import { LABELS } from "../utils/labels";
+import type { FileUploadItem } from "../types/fileUpload";
+
+export interface FileUploadDialogProps {
+	/** Whether the dialog is open */
+	open: boolean;
+	/** Called when the dialog open state changes (e.g. close button, Done) */
+	onOpenChange: (open: boolean) => void;
+	/** File items with upload state and progress */
+	fileItems: FileUploadItem[];
+	/** Called when the user cancels an in-progress upload */
+	onCancelFile: (fileName: string) => void;
+	/** Whether all uploads are complete (success, error, or cancelled) */
+	allDone: boolean;
+}
+
+/**
+ * Modal dialog showing upload progress. Lists each file with FileUploadFileItem,
+ * displays upload summary (e.g. "1 of 2 files uploaded"), and a Done button
+ * disabled until all uploads complete.
+ */
+export function FileUploadDialog({
+	open,
+	onOpenChange,
+	fileItems,
+	onCancelFile,
+	allDone,
+}: FileUploadDialogProps) {
+	const successCount = fileItems.filter((i) => i.state === "success").length;
+	const summaryText = formatUploadSummary(successCount, fileItems.length);
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent showCloseButton>
+				<DialogHeader>
+					<DialogTitle className="text-blue-900">{LABELS.uploadFilesDialogTitle}</DialogTitle>
+				</DialogHeader>
+
+				<ul className="max-h-60 min-w-0 space-y-2 overflow-y-auto" aria-label={LABELS.uploadStatus}>
+					{fileItems.map((item, i) => (
+						<FileUploadFileItem
+							key={`${item.file.name}-${i}`}
+							item={item}
+							onCancel={onCancelFile}
+						/>
+					))}
+				</ul>
+
+				<DialogFooter className="grid min-w-0 grid-cols-[auto_minmax(0,4fr)_minmax(0,5fr)] items-center px-2 pb-1 pt-2">
+					<div aria-hidden />
+					<p className="min-w-0 text-sm font-medium text-blue-900">{summaryText}</p>
+					<div className="flex min-w-0 justify-end">
+						<DialogClose asChild>
+							<Button
+								variant="outline"
+								className="flex-shrink-0"
+								disabled={!allDone}
+								aria-label={LABELS.doneButton}
+							>
+								{LABELS.done}
+							</Button>
+						</DialogClose>
+					</div>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/components/FileUploadDropZone.tsx

@@ -0,0 +1,82 @@
+import { UtilityIcon } from "./FileUploadIcons";
+import { LABELS } from "../utils/labels";
+
+export interface FileUploadDropZoneProps {
+	/** Props for the hidden file input (ref, type, accept, multiple, onChange) */
+	inputProps: {
+		ref: React.RefObject<HTMLInputElement | null>;
+		type: "file";
+		accept?: string;
+		multiple: boolean;
+		onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	};
+	/** Props for the drop zone (onClick, onDragOver, onDragLeave, onDrop, onKeyDown) */
+	dropZoneProps: {
+		onClick: () => void;
+		onDragOver: (e: React.DragEvent) => void;
+		onDragLeave: (e: React.DragEvent) => void;
+		onDrop: (e: React.DragEvent) => void;
+		onKeyDown: (e: React.KeyboardEvent) => void;
+	};
+	/** Whether the user is currently dragging over the drop zone */
+	isDragging: boolean;
+}
+
+const DROP_ZONE_BASE_CLASSES =
+	"mb-2 flex cursor-pointer flex-wrap items-center gap-3 rounded-[4px] border border-dashed p-1 transition-colors";
+const DROP_ZONE_DRAGGING_CLASSES = "border-blue-500 bg-blue-50";
+const DROP_ZONE_IDLE_CLASSES = "hover:bg-gray-50";
+const BORDER_COLOR_IDLE = "rgb(116, 116, 116)";
+
+/**
+ * Drop zone for file selection. Renders a dashed border area with "Upload Files"
+ * button and "Or drop files" / "Drop files here" text. Accepts click and drag-and-drop.
+ * Uses a hidden file input; props come from useFileUpload.
+ */
+export function FileUploadDropZone({
+	inputProps,
+	dropZoneProps,
+	isDragging,
+}: FileUploadDropZoneProps) {
+	const dropZoneClassName = [
+		DROP_ZONE_BASE_CLASSES,
+		isDragging ? DROP_ZONE_DRAGGING_CLASSES : DROP_ZONE_IDLE_CLASSES,
+	].join(" ");
+
+	return (
+		<>
+			<p className="mb-1 text-sm font-semibold text-gray-900">{LABELS.attach}</p>
+			<div
+				role="button"
+				tabIndex={0}
+				onClick={dropZoneProps.onClick}
+				onDragOver={dropZoneProps.onDragOver}
+				onDragLeave={dropZoneProps.onDragLeave}
+				onDrop={dropZoneProps.onDrop}
+				onKeyDown={dropZoneProps.onKeyDown}
+				className={dropZoneClassName}
+				style={!isDragging ? { borderColor: BORDER_COLOR_IDLE } : undefined}
+				aria-label={LABELS.dropZone}
+				data-testid="file-upload-drop-zone"
+			>
+				<input
+					id="file-upload-input-id"
+					ref={inputProps.ref}
+					type="file"
+					accept={inputProps.accept}
+					multiple={inputProps.multiple}
+					onChange={inputProps.onChange}
+					className="sr-only"
+					aria-hidden
+				/>
+				<span className="inline-flex items-center gap-2 rounded-[4px] border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-blue-600 hover:bg-gray-50">
+					<UtilityIcon id="upload" size="sm" />
+					{LABELS.uploadFiles}
+				</span>
+				<span className="text-sm text-gray-900">
+					{isDragging ? LABELS.dropFilesHere : LABELS.orDropFiles}
+				</span>
+			</div>
+		</>
+	);
+}

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/components/FileUploadFileItem.tsx

@@ -0,0 +1,99 @@
+import { Button } from "@/components/ui";
+import { FileTypeIcon, UtilityIcon } from "./FileUploadIcons";
+import {
+	formatFileSize,
+	getFileExtension,
+	getProgressWidth,
+	isUploading,
+} from "../utils/fileUploadUtils";
+import { LABELS } from "../utils/labels";
+import type { FileUploadItem } from "../types/fileUpload";
+
+export interface FileUploadFileItemProps {
+	/** The file item with upload state, progress, and optional error */
+	item: FileUploadItem;
+	/** Called when the user cancels an in-progress upload */
+	onCancel: (fileName: string) => void;
+}
+
+/**
+ * Renders a single file upload item with file type icon, name, size, progress bar,
+ * cancel button (when uploading), and status icon (success, error, or cancelled).
+ */
+export function FileUploadFileItem({ item, onCancel }: FileUploadFileItemProps) {
+	const extension = getFileExtension(item.file.name);
+	const progressWidth = getProgressWidth(item.state, item.progress);
+
+	return (
+		<li
+			className="grid min-w-0 grid-cols-[auto_minmax(0,4fr)_minmax(0,5fr)] items-center gap-2 rounded-lg border border-gray-200 bg-gray-100 p-2"
+			data-testid="file-upload-item"
+		>
+			<FileTypeIcon extension={extension} />
+			<div className="min-w-0 overflow-hidden">
+				<p
+					className="truncate text-sm font-medium text-gray-900"
+					title={item.file.name}
+					aria-label={LABELS.fileName(item.file.name)}
+				>
+					{item.file.name}
+				</p>
+				<p
+					className="truncate text-xs text-gray-600"
+					aria-label={LABELS.fileSize(formatFileSize(item.file.size))}
+				>
+					{formatFileSize(item.file.size)}
+				</p>
+			</div>
+			<div className="flex min-w-0 items-center gap-1.5">
+				<div
+					className="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-gray-200"
+					role="progressbar"
+					aria-label={LABELS.uploadProgress(item.file.name)}
+					aria-valuenow={progressWidth}
+					aria-valuemin={0}
+					aria-valuemax={100}
+				>
+					<div
+						className="h-full bg-blue-600 transition-all duration-300"
+						style={{ width: `${progressWidth}%` }}
+					/>
+				</div>
+				{isUploading(item.state) && (
+					<Button
+						type="button"
+						variant="ghost"
+						size="icon"
+						className="h-7 w-7 shrink-0 text-gray-600 hover:text-red-600"
+						onClick={() => onCancel(item.file.name)}
+						aria-label={LABELS.cancelUpload(item.file.name)}
+					>
+						<UtilityIcon id="clear" fill="rgb(116, 116, 116)" />
+					</Button>
+				)}
+				{renderStatusIcon(item.state)}
+				{item.state === "error" && item.error && <p className="sr-only">{item.error}</p>}
+			</div>
+		</li>
+	);
+}
+
+function renderStatusIcon(state: FileUploadItem["state"]): React.ReactNode {
+	if (isUploading(state)) return null;
+	if (state === "success") return <UtilityIcon id="success" fill="rgb(46, 132, 74)" />;
+	if (state === "cancelled") {
+		return (
+			<span className="shrink-0 text-xs text-gray-500" aria-label={LABELS.cancelled}>
+				{LABELS.cancelled}
+			</span>
+		);
+	}
+	return (
+		<span
+			className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-red-600"
+			aria-label={LABELS.uploadFailed}
+		>
+			×
+		</span>
+	);
+}

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/components/FileUploadIcons.tsx

@@ -0,0 +1,58 @@
+import symbolsUrl from "@assets/symbols.svg?url";
+
+import utilitySvg from "@assets/utility.svg?url";
+
+const IMAGE_EXTENSIONS = new Set([
+	"jpg",
+	"jpeg",
+	"png",
+	"gif",
+	"webp",
+	"svg",
+	"bmp",
+	"ico",
+	"tiff",
+	"tif",
+]);
+
+/**
+ * Renders a file-type icon based on extension. Uses symbols.svg: "unknown" for
+ * no extension, "image" for image types, or the extension (e.g. pdf) for others.
+ */
+export function FileTypeIcon({ extension }: { extension: string }) {
+	/** Symbol ID in symbols.svg: unknown (no ext), image (image types), or extension (e.g. pdf). */
+	const ext = extension.toLowerCase();
+	const symbolId = extension === "FILE" ? "unknown" : IMAGE_EXTENSIONS.has(ext) ? "image" : ext;
+	return (
+		<span
+			className="inline-flex h-8 w-8 shrink-0 items-center justify-center"
+			aria-hidden
+			title={extension}
+		>
+			<svg className="h-full w-full" aria-hidden>
+				<use href={`${symbolsUrl}#${symbolId}`} />
+			</svg>
+		</span>
+	);
+}
+/** Symbol ID in utility.svg (e.g. clear, success, upload) */
+export interface UtilityIconProps {
+	id: string;
+	size?: "sm" | "md";
+	fill?: string;
+}
+
+/**
+ * Renders a utility icon from utility.svg by symbol id. Supports size (sm/md)
+ * and fill color. Used for clear, success, upload, etc.
+ */
+export function UtilityIcon({ id, size = "md", fill = "currentColor" }: UtilityIconProps) {
+	const sizeClass = size === "sm" ? "h-4 w-4" : "h-6 w-6";
+	return (
+		<span className={`inline-flex ${sizeClass} shrink-0 items-center justify-center`} aria-hidden>
+			<svg className="h-full w-full" fill={fill} aria-hidden>
+				<use href={`${utilitySvg}#${id}`} />
+			</svg>
+		</span>
+	);
+}

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/hooks/useFileUpload.ts

@@ -0,0 +1,299 @@
+/**
+ * Hook: useFileUpload
+ *
+ * Manages file upload state and logic: config fetch, upload to URL, ContentVersion creation.
+ * Separates upload logic from UI. Use for custom upload UIs or with the FileUpload component.
+ *
+ * @param options - Upload options (accept, multiple, recordId, onUploadComplete, onUploadError)
+ * @returns Object containing fileItems, allDone, cancelFile, getInputProps, getDropZoneProps, openFilePicker, isDragging, reset
+ *
+ * @remarks
+ * Coordinates: (1) getUploadConfig for token/URL, (2) uploadToUrl for file body, (3) createContentVersion
+ * for record creation. Supports cancel, progress tracking, and sequential multi-file uploads.
+ */
+import * as React from "react";
+import { flushSync } from "react-dom";
+import {
+	getUploadConfig,
+	uploadToUrl,
+	createContentVersion,
+	getCurrentUserId,
+} from "../api/fileUpload";
+import type { FileUploadItem, UploadedFile, UploadState } from "../types/fileUpload";
+import { isFileTooLarge, MAX_FILE_SIZE_BYTES, formatFileSize } from "../utils/fileUploadUtils";
+import { LABELS } from "../utils/labels";
+
+export interface UseFileUploadOptions {
+	/** MIME types or file extensions to accept (e.g. image/*, .pdf). Omit for all files. */
+	accept?: string;
+	/** Whether to allow multiple file selection. Default: false */
+	multiple?: boolean;
+	/** Record Id for FirstPublishLocationId (e.g. Account, Opportunity). When provided, files are linked to this record. Otherwise, current user Id is used. */
+	recordId?: string;
+	/** Called when uploads complete. Receives array of successfully uploaded files with name, size, and contentVersionId. */
+	onUploadComplete?: (files: UploadedFile[]) => void;
+	/** Called when an upload fails. Receives the file and error message. */
+	onUploadError?: (file: File, error: string) => void;
+}
+
+function updateItem(
+	items: FileUploadItem[],
+	fileName: string,
+	update: Partial<FileUploadItem>,
+): FileUploadItem[] {
+	return items.map((item) => (item.file.name === fileName ? { ...item, ...update } : item));
+}
+
+interface UseFileUploadReturn {
+	fileItems: FileUploadItem[];
+	allDone: boolean;
+	cancelFile: (fileName: string) => void;
+	getInputProps: () => {
+		ref: React.RefObject<HTMLInputElement | null>;
+		type: "file";
+		accept?: string;
+		multiple: boolean;
+		onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	};
+	getDropZoneProps: () => {
+		onClick: () => void;
+		onDragOver: (e: React.DragEvent) => void;
+		onDragLeave: (e: React.DragEvent) => void;
+		onDrop: (e: React.DragEvent) => void;
+		onKeyDown: (e: React.KeyboardEvent) => void;
+	};
+	/** Programmatically open the native file picker. Use with a custom trigger (e.g. button). */
+	openFilePicker: () => void;
+	isDragging: boolean;
+	reset: () => void;
+}
+
+export function useFileUpload(options: UseFileUploadOptions = {}): UseFileUploadReturn {
+	const { accept, multiple = false, recordId, onUploadComplete, onUploadError } = options;
+
+	const [fileItems, setFileItems] = React.useState<FileUploadItem[]>([]);
+	const [isDragging, setIsDragging] = React.useState(false);
+	const inputRef = React.useRef<HTMLInputElement>(null);
+	const cancelledFilesRef = React.useRef<Set<string>>(new Set());
+	const currentAbortControllerRef = React.useRef<AbortController | null>(null);
+	const currentFileNameRef = React.useRef<string | null>(null);
+
+	const cancelFile = React.useCallback((fileName: string) => {
+		cancelledFilesRef.current.add(fileName);
+		if (currentFileNameRef.current === fileName && currentAbortControllerRef.current) {
+			currentAbortControllerRef.current.abort();
+		}
+	}, []);
+
+	React.useEffect(() => {
+		return () => {
+			currentAbortControllerRef.current?.abort();
+		};
+	}, []);
+
+	const handleChange = React.useCallback(
+		async (e: React.ChangeEvent<HTMLInputElement>) => {
+			const files = e.target.files ? Array.from(e.target.files) : [];
+			if (files.length === 0) return;
+
+			const maxSizeLabel = formatFileSize(MAX_FILE_SIZE_BYTES);
+			const errorMessage = LABELS.fileTooLarge(maxSizeLabel);
+
+			const items: FileUploadItem[] = files.map((file) => {
+				if (isFileTooLarge(file)) {
+					onUploadError?.(file, errorMessage);
+					return {
+						file,
+						state: "error" as UploadState,
+						progress: 0,
+						error: errorMessage,
+					};
+				}
+				return {
+					file,
+					state: "loading_config" as UploadState,
+					progress: 0,
+				};
+			});
+			setFileItems(items);
+			cancelledFilesRef.current.clear();
+
+			const itemsToUpload = items.filter((item) => item.state !== "error");
+			if (itemsToUpload.length === 0) {
+				e.target.value = "";
+				return;
+			}
+
+			let config: Awaited<ReturnType<typeof getUploadConfig>> | null = null;
+			let publishLocationId: string | null = null;
+			const uploadedFiles: UploadedFile[] = [];
+
+			for (const item of itemsToUpload) {
+				const { file } = item;
+
+				if (cancelledFilesRef.current.has(file.name)) {
+					setFileItems((prev) => updateItem(prev, file.name, { state: "cancelled", progress: 0 }));
+					continue;
+				}
+
+				try {
+					if (!config) {
+						config = await getUploadConfig();
+					}
+					setFileItems((prev) => updateItem(prev, file.name, { state: "loading_config" }));
+
+					if (cancelledFilesRef.current.has(file.name)) {
+						setFileItems((prev) =>
+							updateItem(prev, file.name, { state: "cancelled", progress: 0 }),
+						);
+						continue;
+					}
+
+					const abortController = new AbortController();
+					currentAbortControllerRef.current = abortController;
+					currentFileNameRef.current = file.name;
+
+					setFileItems((prev) => updateItem(prev, file.name, { state: "uploading", progress: 0 }));
+					const contentBodyId = await uploadToUrl(
+						file,
+						config.token,
+						config.uploadUrl,
+						(percent) => {
+							setFileItems((prev) => updateItem(prev, file.name, { progress: percent }));
+						},
+						abortController.signal,
+					);
+
+					currentAbortControllerRef.current = null;
+					currentFileNameRef.current = null;
+
+					if (cancelledFilesRef.current.has(file.name)) {
+						continue;
+					}
+
+					if (!publishLocationId) {
+						publishLocationId = recordId ?? (await getCurrentUserId());
+					}
+					setFileItems((prev) =>
+						updateItem(prev, file.name, { state: "creating_record", progress: 100 }),
+					);
+					const contentVersionId = await createContentVersion(
+						file,
+						contentBodyId,
+						publishLocationId,
+					);
+
+					flushSync(() => {
+						setFileItems((prev) =>
+							updateItem(prev, file.name, {
+								state: "success",
+								progress: 100,
+								contentVersionId,
+							}),
+						);
+					});
+					uploadedFiles.push({
+						name: file.name,
+						size: file.size,
+						contentVersionId,
+					});
+				} catch (err) {
+					currentAbortControllerRef.current = null;
+					currentFileNameRef.current = null;
+					const message = err instanceof Error ? err.message : String(err);
+					const isCancelled =
+						message === "Upload aborted" || cancelledFilesRef.current.has(file.name);
+					setFileItems((prev) =>
+						updateItem(prev, file.name, {
+							state: isCancelled ? "cancelled" : "error",
+							error: isCancelled ? undefined : message,
+						}),
+					);
+					if (!isCancelled) {
+						onUploadError?.(file, message);
+					}
+					// Continue with remaining files; do not return early
+				}
+			}
+
+			if (uploadedFiles.length > 0) {
+				onUploadComplete?.(uploadedFiles);
+			}
+
+			e.target.value = "";
+		},
+		[recordId, onUploadComplete, onUploadError],
+	);
+
+	const handleDragOver = React.useCallback((e: React.DragEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setIsDragging(true);
+	}, []);
+
+	const handleDragLeave = React.useCallback((e: React.DragEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setIsDragging(false);
+	}, []);
+
+	const handleDrop = React.useCallback(
+		(e: React.DragEvent) => {
+			e.preventDefault();
+			e.stopPropagation();
+			setIsDragging(false);
+			const files = e.dataTransfer.files ? Array.from(e.dataTransfer.files) : [];
+			if (files.length > 0 && inputRef.current) {
+				const dt = new DataTransfer();
+				files.forEach((f) => dt.items.add(f));
+				inputRef.current.files = dt.files;
+				handleChange({ target: inputRef.current } as React.ChangeEvent<HTMLInputElement>);
+			}
+		},
+		[handleChange],
+	);
+
+	const handleClick = React.useCallback(() => {
+		inputRef.current?.click();
+	}, []);
+
+	const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			inputRef.current?.click();
+		}
+	}, []);
+
+	const reset = React.useCallback(() => {
+		setFileItems([]);
+	}, []);
+
+	const allDone =
+		fileItems.length > 0 &&
+		fileItems.every(
+			(item) => item.state === "success" || item.state === "error" || item.state === "cancelled",
+		);
+
+	return {
+		fileItems,
+		allDone,
+		isDragging,
+		reset,
+		cancelFile,
+		openFilePicker: handleClick,
+		getInputProps: () => ({
+			ref: inputRef,
+			type: "file" as const,
+			accept,
+			multiple,
+			onChange: handleChange,
+		}),
+		getDropZoneProps: () => ({
+			onClick: handleClick,
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			onDrop: handleDrop,
+			onKeyDown: handleKeyDown,
+		}),
+	};
+}