Commit 3218e54c authored by Lee Soobeom's avatar Lee Soobeom
Browse files

posting files upload

parent 4fba10b8
......@@ -33,3 +33,8 @@ export const updating = async (post: PostType) => {
const { data } = await axios.put(`${baseUrl}/posts/${post._id}`, post);
return data;
};
export const postImg = async (formdata: FormData) => {
const { data } = await axios.post(`${baseUrl}/posts`, formdata);
return data;
};
......@@ -27,12 +27,12 @@ export function IntoPost() {
<div className="flex flex-row basis-8 gap-x-1">
<div className="border-2 border-sky-300 border-current rounded">
<button id={post._id} onClick={handleDeleteClick}>
delete
삭제
</button>
</div>
<div className="border-2 border-sky-300 border-current rounded">
<Link to="/edit" state={post}>
<button>update</button>
<button>수정</button>
</Link>
</div>
</div>
......
import React, { FormEvent, useState } from "react";
import React, { FormEvent, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import isLength from "validator/lib/isLength";
import equals from "validator/lib/equals";
......@@ -8,8 +8,8 @@ import { postApi } from "../apis";
import { File } from "formidable";
export default function Posting() {
const [city, setCity] = useState<string>("질문종류");
const [theme, setTheme] = useState<string>("질문종류");
const [city, setCity] = useState<string>("city");
const [theme, setTheme] = useState<string>("theme");
const [title, setTitle] = useState<string>("");
const [text, setText] = useState<string>("");
const [file, setFile] = useState<File>();
......@@ -27,26 +27,28 @@ 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);
const [success, setSuccess] = useState(false);
useEffect(() => {
console.log("uploaded imgs", imgSrc);
}, [imgSrc]);
const imgArr = new Array();
const sendImg2Db = async (filelist: FileList) => {
const formdata = new FormData();
if (!(filelist === undefined || filelist === null)) {
for (var i = 0; i < filelist.length; i++) {
formdata.append(`picture${i}`, filelist?.[i]);
}
console.log("formdata", formdata);
await postApi.postImg(formdata);
}
};
async function handlePostSubmit(event: FormEvent) {
event.preventDefault();
......@@ -55,6 +57,7 @@ export default function Posting() {
console.log("user data", user);
if (postingFormMatch()) {
setLoading(true);
// sendImg2Db();
const res = await postApi.posting(user);
console.log("서버연결됬나요", res);
// console.log("user save");
......@@ -120,20 +123,24 @@ 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]);
const handleInputPic = async (event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault();
const maxImg = 10;
const { files } = event.target;
if (!(files?.length === undefined)) {
if (files?.length <= maxImg) {
for (var i = 0; i < files.length; i++) {
const reader = new FileReader();
reader.readAsDataURL(files?.[i]);
reader.onload = (e) => {
imgArr.push(e.target?.result);
setImgSrc(imgArr);
};
}
setImgSrc(imgArr);
} else {
alert("사진은 최대 5장까지 업로드 가능합니다!");
alert("사진은 최대 10장까지 업로드 가능합니다!");
}
}
};
......@@ -145,7 +152,7 @@ export default function Posting() {
<p className="basis-1/12 gap-x-8">Id</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>
<input type="file" multiple onChange={handleInputPic} />
</div>
<select
name="city"
......@@ -204,14 +211,11 @@ export default function Posting() {
className="w-full h-8 border-2 border-sky-300"
></textarea>
</div>
<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 className="flex flex-col">
<div className="flex h-48 overflow-x-scroll">
{imgSrc?.map((img, i) => (
<img key={i} src={img} width={200} height={200} />
))}
</div>
<textarea
onChange={textChange}
......
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