file upload hook

1/** biome-ignore-all lint/correctness/useExhaustiveDependencies: <explanation> */
2import type React from 'react'
3 
4import {
5	type ChangeEvent,
6	type DragEvent,
7	type InputHTMLAttributes,
8	useCallback,
9	useRef,
10	useState,
11} from 'react'
12 
13export type FileMetadata = {
14	name: string
15	size: number
16	type: string
17	url: string
18	id: string
19}
20 
21export type FileWithPreview = {
22	file: File | FileMetadata
23	id: string
24	preview?: string
25}
26 
27export type FileUploadOptions = {
28	maxFiles?: number // Only used when multiple is true, defaults to Infinity
29	maxSize?: number // in bytes
30	accept?: string
31	multiple?: boolean // Defaults to false
32	initialFiles?: FileMetadata[]
33	onFilesChange?: (files: FileWithPreview[]) => void // Callback when files change
34	onFilesAdded?: (addedFiles: FileWithPreview[]) => void // Callback when new files are added
35}
36 
37export type FileUploadState = {
38	files: FileWithPreview[]
39	isDragging: boolean
40	errors: string[]
41}
42 
43export type FileUploadActions = {
44	addFiles: (files: FileList | File[]) => void
45	removeFile: (id: string) => void
46	clearFiles: () => void
47	clearErrors: () => void
48	handleDragEnter: (e: DragEvent<HTMLElement>) => void
49	handleDragLeave: (e: DragEvent<HTMLElement>) => void
50	handleDragOver: (e: DragEvent<HTMLElement>) => void
51	handleDrop: (e: DragEvent<HTMLElement>) => void
52	handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void
53	openFileDialog: () => void
54	getInputProps: (
55		props?: InputHTMLAttributes<HTMLInputElement>,
56	) => InputHTMLAttributes<HTMLInputElement> & {
57		ref: React.Ref<HTMLInputElement>
58	}
59}
60 
61export const useFileUpload = (
62	options: FileUploadOptions = {},
63): [FileUploadState, FileUploadActions] => {
64	const {
65		maxFiles = Infinity,
66		maxSize = Infinity,
67		accept = '*',
68		multiple = false,
69		initialFiles = [],
70		onFilesChange,
71		onFilesAdded,
72	} = options
73 
74	const [state, setState] = useState<FileUploadState>({
75		files: initialFiles.map((file) => ({
76			file,
77			id: file.id,
78			preview: file.url,
79		})),
80		isDragging: false,
81		errors: [],
82	})
83 
84	const inputRef = useRef<HTMLInputElement>(null)
85 
86	const createPreview = useCallback(
87		(file: File | FileMetadata): string | undefined => {
88			if (file instanceof File) {
89				return URL.createObjectURL(file)
90			}
91			return file.url
92		},
93		[],
94	)
95 
96	const generateUniqueId = useCallback((file: File | FileMetadata): string => {
97		if (file instanceof File) {
98			return `${file.name}-${crypto.randomUUID()}`
99		}
100		return file.id
101	}, [])
102 
103	const clearFiles = useCallback(() => {
104// … truncated