diff --git a/src/components/menu-settings/CustomTheme.tsx b/src/components/menu-settings/CustomTheme.tsx index 3eaf4d0b..75dc33b7 100644 --- a/src/components/menu-settings/CustomTheme.tsx +++ b/src/components/menu-settings/CustomTheme.tsx @@ -1,20 +1,32 @@ import { ChangeEvent, useRef } from "react"; import { Button } from "../button"; import { useBackgroundImageStore } from "@/store/BackgroundThemeStore"; +import ImageIcon from "@/icons/ImageIcon"; +import { useSettingsModalStore } from "@/store/SettingsModalStore"; +import translation from "@/translations/global.json"; export default function CustomTheme() { const dataInputRef = useRef(null); const { setBackgroundImage } = useBackgroundImageStore(); - - const handleImageChange = (event: ChangeEvent) => { + const { lang } = useSettingsModalStore(); + const handleImageChange = async (event: ChangeEvent) => { const newBackgroundImage = event.target.files?.[0]; if (!newBackgroundImage) return; const allowedImageTypes = ["image/jpeg", "image/png", "image/gif"]; + const maxSizeInBytes = 4 * 1024 * 1024; // 4MB if (!allowedImageTypes.includes(newBackgroundImage.type)) { - alert("Only image files (JPEG, PNG, GIF) are allowed."); + alert(`${translation.settings["custom-background-image"][lang]}`); + if (dataInputRef.current) { + dataInputRef.current.value = ""; + } + return; + } + + if (newBackgroundImage.size > maxSizeInBytes) { + alert(`${translation.settings["max-file-size"][lang]}`); if (dataInputRef.current) { dataInputRef.current.value = ""; } @@ -22,16 +34,23 @@ export default function CustomTheme() { } // Convert image to string base64 - const reader = new FileReader(); - reader.onload = (e) => { - const base64Image = e.target?.result as string; + const base64Image = await readFileAsBase64(newBackgroundImage); - // Save to localstorage - localStorage.setItem("customBackgroundImage", base64Image); - setBackgroundImage(base64Image); - }; + // Save to local storage + localStorage.setItem("customBackgroundImage", base64Image); + setBackgroundImage(base64Image); + }; - reader.readAsDataURL(newBackgroundImage); + const readFileAsBase64 = (file: File): Promise => { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => { + const base64Image = reader.result as string; + resolve(base64Image); + }; + reader.onerror = reject; + reader.readAsDataURL(file); + }); }; return ( @@ -44,11 +63,15 @@ export default function CustomTheme() { onChange={handleImageChange} />