posting file upload

frontend/src/post/posting.tsx

@@ -5,12 +5,15 @@ import equals from "validator/lib/equals";
 import { catchErrors } from "../helpers";
 import { PostType } from "../types";
 import { postApi } from "../apis";
+import { File } from "formidable";
 
 export default function Posting() {
   const [city, setCity] = useState<string>("질문종류");
   const [theme, setTheme] = useState<string>("질문종류");
   const [title, setTitle] = useState<string>("");
   const [text, setText] = useState<string>("");
+  const [file, setFile] = useState<File>();
+  const [imgSrc, setImgSrc] = useState<string[]>();
   const navigate = useNavigate();
 
   const [user, setUser] = useState<PostType>({
@@ -24,6 +27,21 @@ export default function Posting() {
     _id: "",
   });
 
+  const imgArr = new Array();
+
+  const img2Url = (fileBlob: Blob) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(fileBlob);
+
+    reader.onload = (data) => {
+      if (typeof data.target?.result === "string") {
+        console.log(data.target?.result);
+        imgArr.push(data.target?.result);
+        // setImgSrc(data.target?.result);
+      }
+    };
+  };
+
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [disabled, setDisabled] = useState(false);
@@ -102,16 +120,37 @@ export default function Posting() {
     setUser(newUser);
   };
 
+  const handleInputPic = (event: React.ChangeEvent<HTMLInputElement>) => {
+    // const fileArr = new FileList;
+    const maxImg = 5;
+    const fileArr = event.target.files;
+    if (!(fileArr?.length === undefined)) {
+      if (!(fileArr?.length > maxImg)) {
+        for (var i = 0; i < maxImg; i++) {
+          // setFile(file);
+          console.log(fileArr[i]);
+          img2Url(fileArr[i]);
+        }
+        setImgSrc(imgArr);
+      } else {
+        alert("사진은 최대 5장까지 업로드 가능합니다!");
+      }
+    }
+  };
+
   return (
-    <div className="flex flex-col border-3">
+    <div className="flex flex-col border-3 ">
       <form onSubmit={handlePostSubmit} className="w-full items-center">
         <div className="flex flex-row relative">
           <p className="basis-1/12 gap-x-8">Id</p>
-          <p className="basis-8/12 invisible">empty</p>
+          <p className="basis-6/12 invisible">empty</p>
+          <div className="basis-2/12 border-2 border-sky-300">
+            <input type="file" multiple onChange={handleInputPic}></input>
+          </div>
           <select
             name="city"
             id="Questions"
-            className="border border-3 border-black w-1/12"
+            className="border-2 border-sky-300 w-1/12"
             onChange={cityChange}
             defaultValue="질문종류"
           >
@@ -130,7 +169,7 @@ export default function Posting() {
           <select
             name="theme"
             id="Questions"
-            className="border border-3 border-black w-1/12"
+            className="border-2 border-sky-300 w-1/12"
             onChange={themeChange}
             defaultValue="질문종류"
           >
@@ -151,26 +190,34 @@ export default function Posting() {
 
           <button
             type="submit"
-            className="border border-black basis-1/12 gap-x-8"
+            className="border-2 border-sky-300 basis-1/12 gap-x-8"
           >
             글쓰기
           </button>
         </div>
 
-        <div className="flex border-4">
+        <div className="flex">
           <textarea
             name="title"
             onChange={titleChange}
             placeholder="title"
-            className="w-full h-8"
+            className="w-full h-8 border-2 border-sky-300"
           ></textarea>
         </div>
-        <div className="flex border-2">
+        <div className="flex flex-col ">
+          <div className="flex">
+            {/* {imgSrc?.map((img, i) => (
+              <div>
+                <img key={i} src={img} width={200} height={200} />
+              </div>
+            ))} */}
+            {/* <img src={imgSrc?.[0]} width={200} height={200} /> */}
+          </div>
           <textarea
             onChange={textChange}
             name="text"
             placeholder="text"
-            className="w-full h-96"
+            className="w-full h-96 border-2 border-sky-300"
           ></textarea>
         </div>
       </form>