Commit 4fba10b8 authored by Lee Soobeom's avatar Lee Soobeom
Browse files

posting file upload

parent 316b6e6d
...@@ -5,12 +5,15 @@ import equals from "validator/lib/equals"; ...@@ -5,12 +5,15 @@ import equals from "validator/lib/equals";
import { catchErrors } from "../helpers"; import { catchErrors } from "../helpers";
import { PostType } from "../types"; import { PostType } from "../types";
import { postApi } from "../apis"; import { postApi } from "../apis";
import { File } from "formidable";
export default function Posting() { export default function Posting() {
const [city, setCity] = useState<string>("질문종류"); const [city, setCity] = useState<string>("질문종류");
const [theme, setTheme] = useState<string>("질문종류"); const [theme, setTheme] = useState<string>("질문종류");
const [title, setTitle] = useState<string>(""); const [title, setTitle] = useState<string>("");
const [text, setText] = useState<string>(""); const [text, setText] = useState<string>("");
const [file, setFile] = useState<File>();
const [imgSrc, setImgSrc] = useState<string[]>();
const navigate = useNavigate(); const navigate = useNavigate();
const [user, setUser] = useState<PostType>({ const [user, setUser] = useState<PostType>({
...@@ -24,6 +27,21 @@ export default function Posting() { ...@@ -24,6 +27,21 @@ export default function Posting() {
_id: "", _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 [loading, setLoading] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [disabled, setDisabled] = useState(false); const [disabled, setDisabled] = useState(false);
...@@ -102,16 +120,37 @@ export default function Posting() { ...@@ -102,16 +120,37 @@ export default function Posting() {
setUser(newUser); 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 ( return (
<div className="flex flex-col border-3"> <div className="flex flex-col border-3 ">
<form onSubmit={handlePostSubmit} className="w-full items-center"> <form onSubmit={handlePostSubmit} className="w-full items-center">
<div className="flex flex-row relative"> <div className="flex flex-row relative">
<p className="basis-1/12 gap-x-8">Id</p> <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 <select
name="city" name="city"
id="Questions" id="Questions"
className="border border-3 border-black w-1/12" className="border-2 border-sky-300 w-1/12"
onChange={cityChange} onChange={cityChange}
defaultValue="질문종류" defaultValue="질문종류"
> >
...@@ -130,7 +169,7 @@ export default function Posting() { ...@@ -130,7 +169,7 @@ export default function Posting() {
<select <select
name="theme" name="theme"
id="Questions" id="Questions"
className="border border-3 border-black w-1/12" className="border-2 border-sky-300 w-1/12"
onChange={themeChange} onChange={themeChange}
defaultValue="질문종류" defaultValue="질문종류"
> >
...@@ -151,26 +190,34 @@ export default function Posting() { ...@@ -151,26 +190,34 @@ export default function Posting() {
<button <button
type="submit" 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> </button>
</div> </div>
<div className="flex border-4"> <div className="flex">
<textarea <textarea
name="title" name="title"
onChange={titleChange} onChange={titleChange}
placeholder="title" placeholder="title"
className="w-full h-8" className="w-full h-8 border-2 border-sky-300"
></textarea> ></textarea>
</div> </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 <textarea
onChange={textChange} onChange={textChange}
name="text" name="text"
placeholder="text" placeholder="text"
className="w-full h-96" className="w-full h-96 border-2 border-sky-300"
></textarea> ></textarea>
</div> </div>
</form> </form>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment