Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
travel
Commits
4fba10b8
Commit
4fba10b8
authored
Jul 21, 2022
by
Lee Soobeom
Browse files
posting file upload
parent
316b6e6d
Changes
1
Show whitespace changes
Inline
Side-by-side
frontend/src/post/posting.tsx
View file @
4fba10b8
...
@@ -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
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment