fix: limit avatar upload size (#8135)

apps/web/public/static/locales/en/common.json

@@ -1784,5 +1784,6 @@
   "seats_and_no_show_fee_error": "Currently cannot enable seats and charge a no-show fee",
   "complete_your_booking": "Complete your booking",
   "complete_your_booking_subject": "Complete your booking: {{title}} on {{date}}",
-  "email_invite_team": "{{email}} has been invited"
+  "email_invite_team": "{{email}} has been invited",
+  "image_size_limit_exceed": "Uploaded image shouldn't exceed 5mb size limit"
 }

packages/ui/components/image-uploader/ImageUploader.tsx

@@ -6,6 +6,7 @@ import Cropper from "react-easy-crop";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "../..";
+import { showToast } from "../toast";
 
 type ReadAsMethod = "readAsText" | "readAsDataURL" | "readAsArrayBuffer" | "readAsBinaryString";
 
@@ -134,7 +135,15 @@ export default function ImageUploader({
     if (!e.target.files?.length) {
       return;
     }
-    setFile(e.target.files[0]);
+
+    const limit = 5 * 1000000; // max limit 5mb
+    const file = e.target.files[0];
+
+    if (file.size > limit) {
+      showToast(t("image_size_limit_exceed"), "error");
+    } else {
+      setFile(file);
+    }
   };
 
   const showCroppedImage = useCallback(