I'm working on a simple bulletin board with React-Quill. I'm implementing to communicate and save the content value to the server, but when uploading an image, there is an error that the image is not displayed in the content, so I can't solve it.
How can I solve this?
function Post() {
const QuillRef = useRef<ReactQuill>()
const [Title, setTitle] = useState("")
const [contents, setcontents] = useState("")
const imageHandler = () => {
const input = document.createElement("input");
const formData = new FormData();
input.setAttribute("type", "file");
input.setAttribute("accept", "image/*");
input.click();
input.onchange = async () => {
const file : any = input.files;
if (file !== null) {
formData.append("image", file[0]);
console.log(formData)
}
}
}
const titleHandler = (e : React.ChangeEvent<HTMLTextAreaElement>) => {
e.preventDefault()
setTitle(e.currentTarget.value)
}
return (
<div className="post">
<ReactQuill
style = {{height : "650px"}}
ref = {(element) => {
if(element != null) {
QuillRef.current = element
}
}}
value = {contents || ""}
onChange = {(content, delta, source, editor) => setcontents(editor.getHTML())}
modules = {modules}
formats = {formats}
theme = "snow"
placeholder = "내용을 입력해주세요"/>
</div>
);
}
export default Post;
If you check FormData with Console.log, it comes out as an empty object.
