feat: upload image

TheoJustin · Aug 23, 2024 · fea0d66 · fea0d66
1 parent f882b34
commit fea0d66
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 12 deletions.
diff --git a/src/config/cloudinary.js b/src/config/cloudinary.js
@@ -2,7 +2,7 @@ import { Cloudinary } from "@cloudinary/url-gen";
 
 export const cld = new Cloudinary({ cloud: { cloudName: "dau03r7yn" } });
 
-export async function uploadImage({ file, onLoading }) {
+export async function uploadImage(file, onLoading)   {
   onLoading(true);
   const formData = new FormData();
   formData.append("file", file);

diff --git a/src/ss_frontend/src/components/TextInput.jsx b/src/ss_frontend/src/components/TextInput.jsx
@@ -1,26 +1,33 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { HiOutlinePaperAirplane } from "react-icons/hi2";
 import { LuImagePlus } from "react-icons/lu";
+import { uploadImage } from "../../../config/cloudinary";
 
 const TextInput = () => {
   const [inputText, setInputText] = useState("");
+  const [images, setImages] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const fileInputRef = useRef(null);
 
   const handleSend = async () => {
     if (inputText.trim() === "") {
       alert("Please enter some text before sending.");
       return;
     }
 
-    console.log(inputText)
-    
+    console.log(inputText);
+
     try {
-      const response = await fetch("https://web-production-d8ae.up.railway.app/analyze", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ comment: inputText }),
-      });
+      const response = await fetch(
+        "https://web-production-d8ae.up.railway.app/analyze",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ comment: inputText }),
+        }
+      );
 
       const data = await response.json();
       if (response.ok) {
@@ -33,6 +40,34 @@ const TextInput = () => {
     }
   };
 
+  const handleImage = async (e) => {
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      const validatedFileTypes = ["image/jpeg", "image/png", "image/jpg"];
+
+      if (validatedFileTypes.includes(file.type)) {
+        try {
+          const url = await uploadImage(file, setLoading);
+          if (url) {
+            setImages((prevImages) => [...prevImages, url]);
+          } else {
+            throw new Error("Failed to upload image.");
+          }
+        } catch (error) {
+          console.log(error);
+        }
+      } else {
+        e.target.value = "";
+      }
+    }
+  };
+
+  const handleImageClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
   return (
     <div className="flex justify-between items-center gap-5">
       <input
@@ -42,7 +77,16 @@ const TextInput = () => {
         value={inputText}
         onChange={(e) => setInputText(e.target.value)}
       />
-      <LuImagePlus className="text-4xl cursor-pointer" />
+      <input
+        type="file"
+        ref={fileInputRef}
+        style={{ display: "none" }}
+        onChange={handleImage}
+      />
+      <LuImagePlus
+        className="text-4xl cursor-pointer"
+        onClick={handleImageClick}
+      />
       <HiOutlinePaperAirplane
         className="text-4xl cursor-pointer"
         onClick={handleSend}