1 files changed, 51 insertions, 0 deletions
diff --git a/apps/web/components/ui/file-picker-button.tsx b/apps/web/components/ui/file-picker-button.tsx
new file mode 100644
index 00000000..ccac1643
--- /dev/null
+++ b/apps/web/components/ui/file-picker-button.tsx
@@ -0,0 +1,51 @@
+import React, { ChangeEvent, useRef } from "react";
+
+import { Button, ButtonProps } from "./button";
+
+interface FilePickerButtonProps extends Omit<ButtonProps, "onClick"> {
+  onFileSelect?: (file: File) => void;
+  accept?: string;
+  multiple?: boolean;
+}
+
+const FilePickerButton: React.FC<FilePickerButtonProps> = ({
+  onFileSelect,
+  accept,
+  multiple = false,
+  ...buttonProps
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleButtonClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files && files.length > 0) {
+      if (onFileSelect) {
+        if (multiple) {
+          Array.from(files).forEach(onFileSelect);
+        } else {
+          onFileSelect(files[0]);
+        }
+      }
+    }
+  };
+
+  return (
+    <div>
+      <Button onClick={handleButtonClick} {...buttonProps} />
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={handleFileChange}
+        className="hidden"
+        accept={accept}
+        multiple={multiple}
+      />
+    </div>
+  );
+};
+
+export default FilePickerButton;