File Upload

1import clsx from "clsx";
2import type React from "react";
3import { useCallback, useRef } from "react";
4import { twMerge } from "tailwind-merge";
5import Appendix from "@/icons/appendix.svg";
6 
7export interface FileUploadProps extends React.ComponentProps<"button"> {
8  onFilesSelect?: (files: File[]) => void;
9}
10 
11export function FileUpload({
12  className,
13  onFilesSelect,
14  ...props
15}: FileUploadProps) {
16  const fileInputRef = useRef<HTMLInputElement>(null);
17  const handleChange = useCallback(
18    (e: React.ChangeEvent<HTMLInputElement>) => {
19      const files = Array.from(e.target.files ?? []);
20      onFilesSelect?.(files);
21      if (fileInputRef.current) fileInputRef.current.value = "";
22    },
23    [onFilesSelect],
24  );
25 
26  return (
27    <button
28      data-slot="file-upload"
29      type="button"
30      className={twMerge(
31        clsx("cursor-pointer text-gray-500 hover:text-gray-500/80", className),
32      )}
33      onClick={() => fileInputRef.current?.click()}
34      {...props}
35    >
36      <img
37        src={Appendix}
38        alt="upload"
39        className="w-5 h-5 dark:filter dark:filter-invert hover:scale-105"
40      />
41      <input
42        type="file"
43        className="hidden"
44        ref={fileInputRef}
45        onChange={handleChange}
46        multiple
47      />
48    </button>
49  );
50}