From 9e17149e5e35a889587d87c4ce2563db3f6c7050 Mon Sep 17 00:00:00 2001
From: Nafees Nazik <84864519+G3root@users.noreply.github.com>
Date: Wed, 19 Apr 2023 21:49:31 +0530
Subject: [PATCH] fix: limit avatar upload size (#8135)

---
 apps/web/public/static/locales/en/common.json         |  3 ++-
 .../ui/components/image-uploader/ImageUploader.tsx    | 11 ++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 9cdbda20c3..124e675857 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/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"
 }
diff --git a/packages/ui/components/image-uploader/ImageUploader.tsx b/packages/ui/components/image-uploader/ImageUploader.tsx
index cef443c763..8238a73b7b 100644
--- a/packages/ui/components/image-uploader/ImageUploader.tsx
+++ b/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(