From a21f0c46c72f269f9de56445ed8f409fa56e0bd3 Mon Sep 17 00:00:00 2001
From: Meet Patel <meetcpatel906@gmail.com>
Date: Sun, 11 Jun 2023 15:06:59 +0530
Subject: [PATCH] enabled csv upload for team bulk invites (#9446)

---
 .../components/MemberInvitationModal.tsx      | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index 5232412463..1e228893db 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -1,6 +1,7 @@
 import { PaperclipIcon, UserIcon, Users } from "lucide-react";
 import { Trans } from "next-i18next";
 import { useMemo, useState } from "react";
+import type { FormEvent } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { classNames } from "@calcom/lib";
@@ -50,6 +51,10 @@ export interface NewMemberForm {
 
 type ModalMode = "INDIVIDUAL" | "BULK";
 
+interface FileEvent<T = Element> extends FormEvent<T> {
+  target: EventTarget & T;
+}
+
 export default function MemberInvitationModal(props: MemberInvitationModalProps) {
   const { t } = useLocale();
   const trpcContext = trpc.useContext();
@@ -90,6 +95,25 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
     );
   };
 
+  const handleFileUpload = (e: FileEvent<HTMLInputElement>) => {
+    if (!e.target.files?.length) {
+      return;
+    }
+    const file = e.target.files[0];
+
+    if (file) {
+      const reader = new FileReader();
+
+      reader.onload = (e) => {
+        const contents = e?.target?.result as string;
+        const values = contents?.split(",").map((email) => email.trim().toLocaleLowerCase());
+        newMemberFormMethods.setValue("emailOrUsername", values);
+      };
+
+      reader.readAsText(file);
+    }
+  };
+
   return (
     <Dialog
       name="inviteModal"
@@ -198,12 +222,20 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
                   }}
                 />
                 <Button
-                  disabled
                   type="button"
                   color="secondary"
                   StartIcon={PaperclipIcon}
                   className="mt-3 justify-center stroke-2">
-                  Upload a .csv file
+                  <label htmlFor="bulkInvite">
+                    Upload a .csv file
+                    <input
+                      id="bulkInvite"
+                      type="file"
+                      accept=".csv"
+                      style={{ display: "none" }}
+                      onChange={handleFileUpload}
+                    />
+                  </label>
                 </Button>
               </div>
             )}