File Input

1'use client'
2 
3import { AlertCircleIcon, CloudUpload, File, XIcon } from 'lucide-react'
4import { Button } from '@/components/ui/button'
5import {
6	formatBytes,
7	useFileUpload,
8} from '@/form-builder/hooks/use-file-upload'
9 
10const getFileIcon = (file: { file: File | { type: string; name: string } }) => {
11	const fileType = file.file.type
12	if (fileType.startsWith('image/')) {
13		// return preview
14		return (
15			<div className="aspect-square size-10 overflow-hidden rounded-md">
16				<img
17					src={URL.createObjectURL(file.file as Blob)}
18					className="object-fill"
19					alt="File preview"
20				/>
21			</div>
22		)
23	}
24	return (
25		<div className="aspect-square size-10 flex items-center justify-center overflow-hidden rounded-full">
26			<File className="size-5 opacity-60" />
27		</div>
28	)
29}
30 
31export function FileUpload({
32	maxFiles,
33	maxSize,
34	placeholder,
35	// description,
36	required,
37	setValue,
38	accept,
39	name,
40	disabled,
41}: {
42	maxFiles: number
43	maxSize: number
44	placeholder?: string
45	// description?: string;
46	required?: boolean
47	disabled?: boolean
48	setValue: (
49		name: string,
50		value: any,
51		options?: {
52			shouldValidate?: boolean
53			shouldDirty?: boolean
54			shouldTouch?: boolean
55		},
56	) => void
57	accept?: string
58	name: string
59}) {
60	const [
61		{ files, isDragging, errors },
62		{
63			handleDragEnter,
64			handleDragLeave,
65			handleDragOver,
66			handleDrop,
67			openFileDialog,
68			removeFile,
69			clearFiles,
70			getInputProps,
71		},
72	] = useFileUpload({
73		multiple: maxFiles > 1,
74		maxFiles,
75		maxSize,
76		accept,
77		onFilesChange: (files) => {
78			setValue(
79				name,
80				files.map((file) => file.file),
81				{ shouldValidate: true, shouldDirty: true, shouldTouch: true },
82			)
83		},
84	})
85 
86	return (
87		<div className="flex flex-col gap-2 pb-2">
88			{/* Drop area */}
89			<div
90				role="button"
91				onClick={openFileDialog}
92				onDragEnter={handleDragEnter}
93				onDragLeave={handleDragLeave}
94				onDragOver={handleDragOver}
95				onDrop={handleDrop}
96				data-dragging={isDragging || undefined}
97				className="border-input hover:bg-accent/50 data-[dragging=true]:bg-accent/50 has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 flex min-h-32 flex-col items-center justify-center rounded-md border border-dashed p-4 transition-colors has-disabled:pointer-events-none has-disabled:opacity-50 has-[input:focus]:ring-[3px] hover:cursor-pointer"
98			>
99				{/* @ts-expect-error caused when upgrading to Nextjs 16 */}
100				<input
101					{...getInputProps()}
102					className="sr-only"
103					aria-label="Upload files"
104// … truncated