From 95a5edce4b1ea843bf06c77d23c8f57b505f1c6f Mon Sep 17 00:00:00 2001
From: Riyanshu Patro <riyanshu@push.org>
Date: Tue, 4 Feb 2025 16:27:21 +0530
Subject: [PATCH] revert the fileupload changes and use label

---
 .../modules/emailPage/components/NewEmail.tsx | 25 +++++++++++++------
 examples/email/yarn.lock                      |  4 +--
 .../src/blocks/fileUpload/FileUpload.tsx      | 18 ++-----------
 3 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/examples/email/src/modules/emailPage/components/NewEmail.tsx b/examples/email/src/modules/emailPage/components/NewEmail.tsx
index 1bfb6093..3c150f3b 100644
--- a/examples/email/src/modules/emailPage/components/NewEmail.tsx
+++ b/examples/email/src/modules/emailPage/components/NewEmail.tsx
@@ -492,14 +492,23 @@ const NewEmail: React.FC<NewEmailProps> = ({ replyTo }) => {
               ))}
             </Box>
             <FileUpload id="file-upload" onChange={handleFileUpload}>
-              <Button
-                disabled={fileAttachment.length === 1}
-                variant="outline"
-                size="extraSmall"
-              >
-                <PaperclipIcon width={16} height={16} />
-                <Text>Choose File</Text>
-              </Button>
+              <label htmlFor="file-upload">
+                <Button
+                  disabled={fileAttachment.length === 1}
+                  variant="outline"
+                  size="extraSmall"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    const label = document.querySelector(
+                      `label[for="file-upload"]`
+                    ) as HTMLLabelElement | null;
+                    label?.click();
+                  }}
+                >
+                  <PaperclipIcon width={16} height={16} />
+                  <Text>Choose File</Text>
+                </Button>
+              </label>
             </FileUpload>
             <Button
               onClick={sendHandler}
diff --git a/examples/email/yarn.lock b/examples/email/yarn.lock
index f61f60ec..1c9272c2 100644
--- a/examples/email/yarn.lock
+++ b/examples/email/yarn.lock
@@ -6802,7 +6802,7 @@ __metadata:
 
 "shared-components@file:../../packages/shared-components::locator=email-app%40workspace%3A.":
   version: 0.1.0
-  resolution: "shared-components@file:../../packages/shared-components#../../packages/shared-components::hash=2a0c9e&locator=email-app%40workspace%3A."
+  resolution: "shared-components@file:../../packages/shared-components#../../packages/shared-components::hash=7c4fa1&locator=email-app%40workspace%3A."
   dependencies:
     "@emotion/react": "npm:^11.13.0"
     "@radix-ui/react-dialog": "npm:^1.1.1"
@@ -6823,7 +6823,7 @@ __metadata:
   peerDependencies:
     react: ^18.3.1
     react-dom: ^18.3.1
-  checksum: 10/087e67f0222975179d77acfb8fcf5e03e41606321966c384a224c327deca3e0543f1a1d611ebdb5e78ab93bbd209784753c406e8aeae0eaec1cb4d95dedd81b4
+  checksum: 10/119704823277de12a38993c983d9c60c77ce862fbb966d0e7a793928688d76cbc461b0914143d7619ffd6eed3dd7406c53477a6a5e9181937c81eb03b89f8578
   languageName: node
   linkType: hard
 
diff --git a/packages/shared-components/src/blocks/fileUpload/FileUpload.tsx b/packages/shared-components/src/blocks/fileUpload/FileUpload.tsx
index 89d89a2a..ae9ff992 100644
--- a/packages/shared-components/src/blocks/fileUpload/FileUpload.tsx
+++ b/packages/shared-components/src/blocks/fileUpload/FileUpload.tsx
@@ -1,4 +1,4 @@
-import { DragEventHandler, forwardRef, ReactNode, useRef } from 'react';
+import { DragEventHandler, forwardRef, ReactNode } from 'react';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
 export type FileUploadProps = {
@@ -23,29 +23,15 @@ const Container = styled.div<{ css?: FlattenSimpleInterpolation }>`
 
 export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
   ({ disabled, children, onChange, onDrop, id }, ref) => {
-    const inputRef = useRef<HTMLInputElement | null>(null);
-
     const handleDragOver: DragEventHandler<HTMLDivElement> = (e) => {
       e.preventDefault();
     };
 
-    const handleClick = () => {
-      if (inputRef.current && !disabled) {
-        inputRef.current.click();
-      }
-    };
-
     return (
-      <Container
-        ref={ref}
-        onDrop={onDrop}
-        onDragOver={handleDragOver}
-        onClick={handleClick}
-      >
+      <Container ref={ref} onDrop={onDrop} onDragOver={handleDragOver}>
         {children}
         <input
           id={id}
-          ref={inputRef}
           type="file"
           accept="image/*"
           hidden={true}