From 6c0e446eb58e957299bf6001851673dddefd5bed Mon Sep 17 00:00:00 2001
From: ttiimmothy <dinosauli2006@gmail.com>
Date: Thu, 23 Nov 2023 20:46:51 -0500
Subject: [PATCH] feat: photo

---
 src/api/review/reviewApiIndex.ts              |  5 +-
 src/components/input/FileInput.tsx            | 30 -------
 src/components/input/NumberInput.tsx          | 37 ---------
 src/components/input/OpeningHoursInput.tsx    | 29 -------
 src/components/input/SearchInput.tsx          | 30 -------
 src/components/input/SelectInput.tsx          | 40 ----------
 src/components/input/TextInput.tsx            | 30 -------
 src/components/input/TextareaInput.tsx        | 28 -------
 src/components/utils/inputs/FileInput.tsx     | 10 +--
 src/components/utils/inputs/NumberInput.tsx   | 10 +--
 .../utils/inputs/OpeningHoursInput.tsx        | 13 +++-
 src/components/utils/inputs/SearchInput.tsx   | 21 +++--
 src/components/utils/inputs/SelectInput.tsx   | 69 ++++++++--------
 src/components/utils/inputs/TextInput.tsx     |  4 +-
 src/components/utils/inputs/TextareaInput.tsx |  6 +-
 .../utils/modals/CreateReviewModal.tsx        | 78 ++++++++++++-------
 .../utils/modals/UploadImageModal.tsx         | 35 +++++++--
 src/pages/restaurant/CreateRestaurantPage.tsx |  2 +-
 src/pages/review/UserInputPage.tsx            |  2 +-
 src/pages/signUp/SignUpPage.tsx               |  9 ++-
 src/utils/fileTypeToExtension.ts              |  5 ++
 src/utils/uploadImageService.ts               |  7 +-
 22 files changed, 173 insertions(+), 327 deletions(-)
 delete mode 100644 src/components/input/FileInput.tsx
 delete mode 100644 src/components/input/NumberInput.tsx
 delete mode 100644 src/components/input/OpeningHoursInput.tsx
 delete mode 100644 src/components/input/SearchInput.tsx
 delete mode 100644 src/components/input/SelectInput.tsx
 delete mode 100644 src/components/input/TextInput.tsx
 delete mode 100644 src/components/input/TextareaInput.tsx
 create mode 100644 src/utils/fileTypeToExtension.ts

diff --git a/src/api/review/reviewApiIndex.ts b/src/api/review/reviewApiIndex.ts
index f31da33..8b6830d 100644
--- a/src/api/review/reviewApiIndex.ts
+++ b/src/api/review/reviewApiIndex.ts
@@ -19,11 +19,12 @@ export const createReview = async (
   createReviewDto: CreateReviewDto,
   imagePrefix: string,
   restaurantID: string,
-  photoCategory: string
+  photoCategory: string,
+  fileExtension?: string
 ): Promise<Review> => {
   return apiClient.post(
     "",
-    { createReviewDto, imagePrefix, restaurantID },
+    { createReviewDto, imagePrefix, restaurantID, fileExtension },
     { params: { photoCategory } }
   );
 };
diff --git a/src/components/input/FileInput.tsx b/src/components/input/FileInput.tsx
deleted file mode 100644
index 4acbadc..0000000
--- a/src/components/input/FileInput.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-type FileInputProps = {
-  label: string;
-  placeholder: string;
-  value?: string | number;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  type: React.HTMLInputTypeAttribute;
-  className: string;
-};
-
-const FileInput = ({
-  label,
-  placeholder,
-  onChange,
-  type,
-  className,
-}: FileInputProps) => {
-  return (
-    <div className="flex flex-col gap-1">
-      <label className="text-sm font-semibold">{label}</label>
-      <input
-        className={`border border-gray-400 rounded-md p-2 ${className}`}
-        type={type}
-        placeholder={placeholder}
-        onChange={onChange}
-      />
-    </div>
-  );
-};
-
-export default FileInput;
diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
deleted file mode 100644
index fa42ec7..0000000
--- a/src/components/input/NumberInput.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-type NumberInputProps = {
-  label: string;
-  placeholder: string;
-  value: number;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  step: string;
-  min?: number;
-  max?: number;
-};
-
-const TextInput = ({
-  label,
-  placeholder,
-  value,
-  onChange,
-  step,
-  min,
-  max,
-}: NumberInputProps) => {
-  return (
-    <div className="flex flex-col">
-      <label>{label}</label>
-      <input
-        className="border border-gray-400 rounded-md p-2 mt-1"
-        type="number"
-        step={step}
-        placeholder={placeholder}
-        value={value}
-        onChange={onChange}
-        min={min}
-        max={max}
-      />
-    </div>
-  );
-};
-
-export default TextInput;
diff --git a/src/components/input/OpeningHoursInput.tsx b/src/components/input/OpeningHoursInput.tsx
deleted file mode 100644
index 6f0ff6e..0000000
--- a/src/components/input/OpeningHoursInput.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
-
-type DateInputProps = {
-  label: string;
-  placeholder: string;
-  value: Date;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-};
-
-const DateInput = ({ label, placeholder, value, onChange }: DateInputProps) => {
-  return (
-    <div className="flex flex-col">
-      <label>{label}</label>
-      <DatePicker
-        placeholderText={placeholder}
-        onChange={(date, e: React.ChangeEvent<HTMLInputElement>) => onChange(e)}
-        selected={value}
-        showTimeSelect
-        showTimeSelectOnly
-        timeIntervals={15}
-        timeCaption="Time"
-        dateFormat="h:mm aa"
-      />
-    </div>
-  );
-};
-
-export default DateInput;
diff --git a/src/components/input/SearchInput.tsx b/src/components/input/SearchInput.tsx
deleted file mode 100644
index 45ff853..0000000
--- a/src/components/input/SearchInput.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { IoSearch } from "react-icons/io5";
-
-type SearchInputProps = {
-  placeholder?: string;
-  value: string;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  type: React.HTMLInputTypeAttribute;
-};
-
-const SearchInput: React.FC<SearchInputProps> = (props) => {
-  return (
-    <div className="flex items-center h-12 w-full">
-      <input
-        className="border border-gray-400 rounded-tl-md rounded-bl-md px-4 outline-none h-full w-full"
-        type={props.type}
-        placeholder={props.placeholder || ""}
-        value={props.value}
-        onChange={props.onChange}
-      />
-      <button
-        type="submit"
-        className="bg-gray-700 h-full w-14 flex justify-center items-center rounded-tr-md rounded-br-md hover:scale-110 hover:rounded-sm duration-500"
-      >
-        <IoSearch color="#FFFFFF" />
-      </button>
-    </div>
-  );
-};
-
-export default SearchInput;
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
deleted file mode 100644
index 7216c19..0000000
--- a/src/components/input/SelectInput.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import Select from 'react-select';
-
-interface ICategory {
-  value: string;
-  label: string;
-}
-
-type SelectInputProps = {
-    label: string;
-    placeholder: string;
-    value: string;
-    onChange: (...event: unknown[]) => void
-    optionList: ICategory[];
-  };
-  
-  const TextInput = ({
-    label,
-    placeholder,
-    value,
-    onChange,
-    optionList,
-  }: SelectInputProps) => {
-    return (
-      <div className="flex flex-col">
-        <label>{label}</label>
-        <Select
-          isClearable
-          placeholder={placeholder}
-          options={optionList}
-          value={optionList.find(c => c.value === value)}
-          onChange={e => {
-            onChange(e?.value);
-           }}
-        />
-      </div>
-    );
-  };
-  
-  export default TextInput;
-  
\ No newline at end of file
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
deleted file mode 100644
index b5b2bca..0000000
--- a/src/components/input/TextInput.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-type TextInputProps = {
-  label: string;
-  placeholder: string;
-  value: string | number;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  type: React.HTMLInputTypeAttribute;
-};
-
-const TextInput = ({
-  label,
-  placeholder,
-  value,
-  onChange,
-  type,
-}: TextInputProps) => {
-  return (
-    <div className="flex flex-col gap-1">
-      <label className="text-sm font-semibold">{label}</label>
-      <input
-        className="border border-gray-400 rounded-md p-2"
-        type={type}
-        placeholder={placeholder}
-        value={value}
-        onChange={onChange}
-      />
-    </div>
-  );
-};
-
-export default TextInput;
diff --git a/src/components/input/TextareaInput.tsx b/src/components/input/TextareaInput.tsx
deleted file mode 100644
index ec95729..0000000
--- a/src/components/input/TextareaInput.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-interface TextareaInputProps {
-  label?: string;
-  placeholder: string;
-  value: string | number;
-  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  type?: React.HTMLInputTypeAttribute;
-  className: string;
-}
-
-export const TextareaInput = ({
-  label,
-  placeholder,
-  value,
-  onChange,
-  className,
-}: TextareaInputProps) => {
-  return (
-    <div className="flex flex-col gap-1">
-      {label && <label className="text-sm font-semibold">{label}</label>}
-      <textarea
-        className={className}
-        placeholder={placeholder}
-        value={value}
-        onChange={onChange}
-      />
-    </div>
-  );
-};
diff --git a/src/components/utils/inputs/FileInput.tsx b/src/components/utils/inputs/FileInput.tsx
index 6d99d3e..5e5312e 100644
--- a/src/components/utils/inputs/FileInput.tsx
+++ b/src/components/utils/inputs/FileInput.tsx
@@ -1,24 +1,24 @@
-type FileInputProps = {
+interface FileInputProps {
   label?: string;
   placeholder: string;
   value?: string | number;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   type: React.HTMLInputTypeAttribute;
   className: string;
-};
+}
 
-const FileInput = ({
+const FileInput: React.FC<FileInputProps> = ({
   label,
   placeholder,
   onChange,
   type,
   className,
-}: FileInputProps) => {
+}) => {
   return (
     <div className="flex flex-col gap-1">
       {label && <label className="text-sm font-semibold">{label}</label>}
       <input
-        className={className}
+        className={`border border-gray-400 rounded-md p-2 ${className}`}
         type={type}
         placeholder={placeholder}
         onChange={onChange}
diff --git a/src/components/utils/inputs/NumberInput.tsx b/src/components/utils/inputs/NumberInput.tsx
index fa42ec7..92c3b4b 100644
--- a/src/components/utils/inputs/NumberInput.tsx
+++ b/src/components/utils/inputs/NumberInput.tsx
@@ -1,4 +1,4 @@
-type NumberInputProps = {
+interface NumberInputProps {
   label: string;
   placeholder: string;
   value: number;
@@ -6,9 +6,9 @@ type NumberInputProps = {
   step: string;
   min?: number;
   max?: number;
-};
+}
 
-const TextInput = ({
+const NumberInput: React.FC<NumberInputProps> = ({
   label,
   placeholder,
   value,
@@ -16,7 +16,7 @@ const TextInput = ({
   step,
   min,
   max,
-}: NumberInputProps) => {
+}) => {
   return (
     <div className="flex flex-col">
       <label>{label}</label>
@@ -34,4 +34,4 @@ const TextInput = ({
   );
 };
 
-export default TextInput;
+export default NumberInput;
diff --git a/src/components/utils/inputs/OpeningHoursInput.tsx b/src/components/utils/inputs/OpeningHoursInput.tsx
index 6f0ff6e..3adf280 100644
--- a/src/components/utils/inputs/OpeningHoursInput.tsx
+++ b/src/components/utils/inputs/OpeningHoursInput.tsx
@@ -1,14 +1,19 @@
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 
-type DateInputProps = {
+interface OpeningHoursInputProps {
   label: string;
   placeholder: string;
   value: Date;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-};
+}
 
-const DateInput = ({ label, placeholder, value, onChange }: DateInputProps) => {
+const OpeningHoursInput: React.FC<OpeningHoursInputProps> = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+}) => {
   return (
     <div className="flex flex-col">
       <label>{label}</label>
@@ -26,4 +31,4 @@ const DateInput = ({ label, placeholder, value, onChange }: DateInputProps) => {
   );
 };
 
-export default DateInput;
+export default OpeningHoursInput;
diff --git a/src/components/utils/inputs/SearchInput.tsx b/src/components/utils/inputs/SearchInput.tsx
index aecb6e5..7dfa4de 100644
--- a/src/components/utils/inputs/SearchInput.tsx
+++ b/src/components/utils/inputs/SearchInput.tsx
@@ -1,25 +1,30 @@
 import { IoSearch } from "react-icons/io5";
 
-type SearchInputProps = {
+interface SearchInputProps {
   placeholder?: string;
   value: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   type: React.HTMLInputTypeAttribute;
-};
+}
 
-const SearchInput: React.FC<SearchInputProps> = (props) => {
+const SearchInput: React.FC<SearchInputProps> = ({
+  placeholder,
+  value,
+  onChange,
+  type,
+}) => {
   return (
     <div className="flex items-center h-12 w-full">
       <input
         className="border border-gray-400 rounded-tl-md rounded-bl-md px-4 outline-none h-full w-full"
-        type={props.type}
-        placeholder={props.placeholder || ""}
-        value={props.value}
-        onChange={props.onChange}
+        type={type}
+        placeholder={placeholder || ""}
+        value={value}
+        onChange={onChange}
       />
       <button
         type="submit"
-        className="bg-gray-700 h-full w-14 flex justify-center items-center rounded-tr-md rounded-br-md"
+        className="bg-gray-700 h-full w-14 flex justify-center items-center rounded-tr-md rounded-br-md hover:scale-110 hover:rounded-sm duration-500"
       >
         <IoSearch color="#FFFFFF" />
       </button>
diff --git a/src/components/utils/inputs/SelectInput.tsx b/src/components/utils/inputs/SelectInput.tsx
index 7216c19..3541120 100644
--- a/src/components/utils/inputs/SelectInput.tsx
+++ b/src/components/utils/inputs/SelectInput.tsx
@@ -1,40 +1,39 @@
-import Select from 'react-select';
+import Select from "react-select";
 
-interface ICategory {
+interface Category {
   value: string;
   label: string;
 }
 
-type SelectInputProps = {
-    label: string;
-    placeholder: string;
-    value: string;
-    onChange: (...event: unknown[]) => void
-    optionList: ICategory[];
-  };
-  
-  const TextInput = ({
-    label,
-    placeholder,
-    value,
-    onChange,
-    optionList,
-  }: SelectInputProps) => {
-    return (
-      <div className="flex flex-col">
-        <label>{label}</label>
-        <Select
-          isClearable
-          placeholder={placeholder}
-          options={optionList}
-          value={optionList.find(c => c.value === value)}
-          onChange={e => {
-            onChange(e?.value);
-           }}
-        />
-      </div>
-    );
-  };
-  
-  export default TextInput;
-  
\ No newline at end of file
+interface SelectInputProps {
+  label: string;
+  placeholder: string;
+  value: string;
+  onChange: (...event: unknown[]) => void;
+  optionList: Category[];
+}
+
+const SelectInput: React.FC<SelectInputProps> = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  optionList,
+}) => {
+  return (
+    <div className="flex flex-col">
+      <label>{label}</label>
+      <Select
+        isClearable
+        placeholder={placeholder}
+        options={optionList}
+        value={optionList.find((c) => c.value === value)}
+        onChange={(e) => {
+          onChange(e?.value);
+        }}
+      />
+    </div>
+  );
+};
+
+export default SelectInput;
diff --git a/src/components/utils/inputs/TextInput.tsx b/src/components/utils/inputs/TextInput.tsx
index b5b2bca..2d67af5 100644
--- a/src/components/utils/inputs/TextInput.tsx
+++ b/src/components/utils/inputs/TextInput.tsx
@@ -6,13 +6,13 @@ type TextInputProps = {
   type: React.HTMLInputTypeAttribute;
 };
 
-const TextInput = ({
+const TextInput: React.FC<TextInputProps> = ({
   label,
   placeholder,
   value,
   onChange,
   type,
-}: TextInputProps) => {
+}) => {
   return (
     <div className="flex flex-col gap-1">
       <label className="text-sm font-semibold">{label}</label>
diff --git a/src/components/utils/inputs/TextareaInput.tsx b/src/components/utils/inputs/TextareaInput.tsx
index ec95729..ab0e33c 100644
--- a/src/components/utils/inputs/TextareaInput.tsx
+++ b/src/components/utils/inputs/TextareaInput.tsx
@@ -7,13 +7,13 @@ interface TextareaInputProps {
   className: string;
 }
 
-export const TextareaInput = ({
+const TextareaInput: React.FC<TextareaInputProps> = ({
   label,
   placeholder,
   value,
   onChange,
   className,
-}: TextareaInputProps) => {
+}) => {
   return (
     <div className="flex flex-col gap-1">
       {label && <label className="text-sm font-semibold">{label}</label>}
@@ -26,3 +26,5 @@ export const TextareaInput = ({
     </div>
   );
 };
+
+export default TextareaInput;
diff --git a/src/components/utils/modals/CreateReviewModal.tsx b/src/components/utils/modals/CreateReviewModal.tsx
index 08750c4..d9009a3 100644
--- a/src/components/utils/modals/CreateReviewModal.tsx
+++ b/src/components/utils/modals/CreateReviewModal.tsx
@@ -1,16 +1,18 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Controller, useForm } from "react-hook-form";
 import { IoClose } from "react-icons/io5";
 import { closeSnackbar, enqueueSnackbar } from "notistack";
 
-import { IRootState } from "../../../store";
+import { AppDispatch, IRootState } from "../../../store";
+import { createReviewThunk } from "../../../redux/review/reviewSlice";
 import { createReview } from "../../../api/review/reviewApiIndex";
-import { TextareaInput } from "../inputs/TextareaInput";
 import { uploadImage } from "../../../utils/uploadImageService";
+import { fileTypeToExtension } from "../../../utils/fileTypeToExtension";
 import TextInput from "../inputs/TextInput";
+import TextareaInput from "../inputs/TextareaInput";
 import NumberInput from "../inputs/NumberInput";
 import FileInput from "../inputs/FileInput";
 import DateInput from "../inputs/DateInput";
@@ -31,9 +33,7 @@ export type ReviewForm = {
   photo?: any;
 };
 
-const CreateReviewModal: React.FC<CreateReviewModalProps> = (
-  props: CreateReviewModalProps
-) => {
+const CreateReviewModal: React.FC<CreateReviewModalProps> = (props) => {
   const navigate = useNavigate();
   const { control, handleSubmit } = useForm({
     defaultValues: {
@@ -46,38 +46,64 @@ const CreateReviewModal: React.FC<CreateReviewModalProps> = (
     } as ReviewForm,
   });
 
+  const dispatch = useDispatch<AppDispatch>();
   const user = useSelector((state: IRootState) => state.auth.currentUser);
 
   const createNewReview = useCallback(
     async (review: ReviewForm) => {
       if (user?.user_id) {
-        const res = await createReview(
-          {
-            title: review.title,
-            content: review.content,
-            spending: review.spending,
-            rating: review.rating,
-            restaurant_id: props?.restaurant_id as string,
-            user_id: user?.user_id,
-            visit_date: new Date(review.visit_date),
-          },
-          process.env.REACT_APP_IMAGE_PREFIX as string,
-          props.restaurant_id as string,
-          "Review"
-        );
-
         if (review.photo) {
+          const res = await createReview(
+            {
+              title: review.title,
+              content: review.content,
+              spending: review.spending,
+              rating: review.rating,
+              restaurant_id: props?.restaurant_id as string,
+              user_id: user?.user_id,
+              visit_date: new Date(review.visit_date),
+            },
+            process.env.REACT_APP_IMAGE_PREFIX as string,
+            props.restaurant_id as string,
+            "Review",
+            fileTypeToExtension[review.photo?.type]
+          );
+
           await uploadImage(
             review.photo,
             props.restaurant_id as string,
             "photos",
-            res?.review_id
+            res?.review_id,
+            "",
+            fileTypeToExtension[review.photo.type]
           );
+
+          enqueueSnackbar("Review and Review photo are added successfully", {
+            variant: "success",
+          });
+        } else {
+          dispatch(
+            createReviewThunk({
+              review: {
+                title: review.title,
+                content: review.content,
+                spending: review.spending,
+                rating: review.rating,
+                restaurant_id: props?.restaurant_id as string,
+                user_id: user?.user_id,
+                visit_date: new Date(review.visit_date),
+              },
+              imagePrefix: process.env.REACT_APP_IMAGE_PREFIX as string,
+              restaurantID: props.restaurant_id as string,
+              photoCategory: "Review",
+            })
+          );
+
+          enqueueSnackbar("Review is added successfully", {
+            variant: "success",
+          });
         }
 
-        enqueueSnackbar("Review and Review photo are added successfully", {
-          variant: "success",
-        });
         props.setShow(false);
         setTimeout(() => {
           navigate(`/restaurant/id/${props?.restaurant_id}`);
@@ -100,7 +126,7 @@ const CreateReviewModal: React.FC<CreateReviewModalProps> = (
         }, 2000);
       }
     },
-    [navigate, user?.user_id, props]
+    [navigate, user?.user_id, props, dispatch]
   );
 
   return props.show ? (
diff --git a/src/components/utils/modals/UploadImageModal.tsx b/src/components/utils/modals/UploadImageModal.tsx
index 6dd228c..7273aac 100644
--- a/src/components/utils/modals/UploadImageModal.tsx
+++ b/src/components/utils/modals/UploadImageModal.tsx
@@ -1,12 +1,13 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
-import { v4 as uuid } from "uuid";
 import { closeSnackbar, enqueueSnackbar } from "notistack";
+import { v4 as uuid } from "uuid";
 import { IoClose } from "react-icons/io5";
 
 import { AppDispatch, IRootState } from "../../../store";
 import { createMenuPhotoThunk } from "../../../redux/photo/photoSlice";
+import { fileTypeToExtension } from "../../../utils/fileTypeToExtension";
 import { uploadImage } from "../../../utils/uploadImageService";
 import FileInput from "../inputs/FileInput";
 
@@ -25,14 +26,28 @@ const UploadImageModal: React.FC<UploadImageModalProps> = ({
 }) => {
   const navigate = useNavigate();
   const [image, setImage] = useState<File | null>(null);
+  const [selectedImage, setSelectedImage] = useState<
+    string | ArrayBuffer | null
+  >(null);
 
   const dispatch = useDispatch<AppDispatch>();
   const user = useSelector((state: IRootState) => state.auth.currentUser);
 
-  const fileTypeToExtension: Record<string, string> = {
-    "image/jpeg": "jpg",
-    "image/png": "png",
-    "application/pdf": "pdf",
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let file;
+    if (e.target.files) {
+      file = e.target.files[0];
+    }
+
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setSelectedImage(reader.result);
+      };
+      reader.readAsDataURL(file);
+    } else {
+      setSelectedImage(null);
+    }
   };
 
   const uploadMenuPhoto = async () => {
@@ -105,10 +120,20 @@ const UploadImageModal: React.FC<UploadImageModalProps> = ({
             </button>
           </div>
           <div className="p-4 flex flex-col justify-center">
+            {selectedImage && (
+              <div className="mb-4 shadow-md rounded-md">
+                <img
+                  src={selectedImage as string}
+                  alt="Preview"
+                  className="w-full h-auto rounded-md"
+                />
+              </div>
+            )}
             <FileInput
               onChange={(e) => {
                 if (e.target.files) {
                   const selectedFile = e.target.files[0];
+                  handleImageChange(e);
                   setImage(selectedFile);
                 }
               }}
diff --git a/src/pages/restaurant/CreateRestaurantPage.tsx b/src/pages/restaurant/CreateRestaurantPage.tsx
index ecae7b3..0f06975 100644
--- a/src/pages/restaurant/CreateRestaurantPage.tsx
+++ b/src/pages/restaurant/CreateRestaurantPage.tsx
@@ -5,7 +5,6 @@ import { Controller, useForm } from "react-hook-form";
 import { closeSnackbar, enqueueSnackbar } from "notistack";
 import DatePicker from "react-datepicker";
 
-import { TextareaInput } from "../../components/utils/inputs/TextareaInput";
 import { AppDispatch, IRootState } from "../../store";
 import { getDishesThunk } from "../../redux/dish/dishSlice";
 import { getDistrictsThunk } from "../../redux/district/districtSlice";
@@ -13,6 +12,7 @@ import { getPaymentMethodsThunk } from "../../redux/paymentMethod/paymentMethodS
 import { createRestaurantThunk } from "../../redux/restaurant/restaurantSlice";
 import { createRestaurantPaymentMethodThunk } from "../../redux/restaurantPaymentMethod/restaurantPaymentMethodSlice";
 import { createRestaurantDishThunk } from "../../redux/restaurantDish/restaurantDishSlice";
+import TextareaInput from "../../components/utils/inputs/TextareaInput";
 import TextInput from "../../components/utils/inputs/TextInput";
 import SelectInput from "../../components/utils/inputs/SelectInput";
 import NumberInput from "../../components/utils/inputs/NumberInput";
diff --git a/src/pages/review/UserInputPage.tsx b/src/pages/review/UserInputPage.tsx
index 76d2efb..3955f52 100644
--- a/src/pages/review/UserInputPage.tsx
+++ b/src/pages/review/UserInputPage.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useForm, Controller } from "react-hook-form";
-import { TextareaInput } from "../../components/utils/inputs/TextareaInput";
+import TextareaInput from "../../components/utils/inputs/TextareaInput";
 
 function UserInput() {
   const { handleSubmit, control } = useForm();
diff --git a/src/pages/signUp/SignUpPage.tsx b/src/pages/signUp/SignUpPage.tsx
index b1512be..45e0da5 100644
--- a/src/pages/signUp/SignUpPage.tsx
+++ b/src/pages/signUp/SignUpPage.tsx
@@ -1,11 +1,12 @@
+import { useEffect } from "react";
 import { useForm, Controller } from "react-hook-form";
-import TextInput from "../../components/utils/inputs/TextInput";
 import { useNavigate } from "react-router-dom";
-import { closeSnackbar, enqueueSnackbar } from "notistack";
 import { useDispatch, useSelector } from "react-redux";
-import { registerThunk } from "../../redux/auth/authSlice";
-import { useEffect } from "react";
+import { closeSnackbar, enqueueSnackbar } from "notistack";
+
 import { AppDispatch, IRootState } from "../../store";
+import { registerThunk } from "../../redux/auth/authSlice";
+import TextInput from "../../components/utils/inputs/TextInput";
 
 const SignUpPage = () => {
   const navigate = useNavigate();
diff --git a/src/utils/fileTypeToExtension.ts b/src/utils/fileTypeToExtension.ts
new file mode 100644
index 0000000..1800817
--- /dev/null
+++ b/src/utils/fileTypeToExtension.ts
@@ -0,0 +1,5 @@
+export const fileTypeToExtension: Record<string, string> = {
+  "image/jpeg": "jpg",
+  "image/png": "png",
+  "application/pdf": "pdf",
+};
diff --git a/src/utils/uploadImageService.ts b/src/utils/uploadImageService.ts
index a85735a..d2a33b1 100644
--- a/src/utils/uploadImageService.ts
+++ b/src/utils/uploadImageService.ts
@@ -10,12 +10,13 @@ export async function uploadImage(
   restaurantId: string,
   path?: string,
   id?: string,
-  imageName?: string
+  imageName?: string,
+  fileExtension?: string
 ) {
-  if (id) {
+  if (id && fileExtension) {
     await supabase.storage
       .from("restaurant")
-      .upload(`/${restaurantId}/${path}/${id}.jpg`, file, {
+      .upload(`/${restaurantId}/${path}/${id}.${fileExtension}`, file, {
         cacheControl: "3600",
         upsert: false,
       });