PostWrite.js

import React, { useRef, useState, useEffect, useContext } from 'react';
import { useNavigate } from 'react-router-dom';

import { UserContext } from '../Usercontext.js';

import SearchMap from '../components/SearchMapByKeyword.js'
import axios from 'axios';
axios.defaults.withCredentials = true;

function PostWrite(){



    /*
      const userContext = useContext(UserContext);
	const navigate = useNavigate();
	function MoveTo(link){
		navigate(link)
	}	
    useEffect(() => {
        userContext.CheckSession()
        .then((response) => {
            if (!response.data) {
                alert("세션이 만료되었습니다. 다시 로그인 바랍니다.")
                MoveTo('/login')
             }
		})
		.catch((response)=>{
			console.log("error!:LogOut")
			console.log(response)
		})
      });


    const [location, setLocation] = useState({
        keyword: "",
        center: { lat: null, lng: null }
    });

    const [inputs, setInputs] = useState({
        title: "",
        content: "",
        imageUrls: [],
    });

    const [previewImg, setPreviewImg] = useState({
        imageUrls: [],
    });
    const imgRef = useRef();

    // 이미지 업로드 input의 onChange
    const saveImgFile = async () => {
        console.log(imgRef.current.files)
        const file = imgRef.current.files[0];
        console.log(file)
        inputs.imageUrls.push(file);
        setInputs({
            ...inputs,
            imageUrls: inputs.imageUrls
        })

        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = () => {
            previewImg.imageUrls.push(reader.result);
            setPreviewImg({
                imageUrls: previewImg.imageUrls
            });
        };
    };
    
    let imglist = [];
    imglist = previewImg.imageUrls.map((image)=>{
        return(
        <img
        src={image ? image :null}
        alt="이미지"
        style={{ width: "100px", height: "100px"}}
        />
        )
    }
    );

    const handleSubmit= async (event) => {
        event.preventDefault();

        try {
            console.log(inputs)
			const response = await axios({
				url: 'http://localhost:8080/post/upload', // 통신할 웹문서
				method: 'post', // 통신할 방식
                headers: {'Content-Type': 'multipart/form-data', charset: 'utf-8'},
				data: inputs
			});
			if (response.status === 200) {
                MoveTo('/')
				return response.data;
			}
			else {
				return null;
			}
            
        }
        catch (error){
            console.log('Error during post creation:', error);
        }
    }
    

    const onChange = (e) => {
        const {value, name} = e.target;
        setInputs({
            ...inputs,
            [name]: value
        });
    }  
    */

    const [content, setContent] = useState("");
    const [uploadedImg, setUploadedImg] = useState({
      fileName: "",
      fillPath: ""
    });
    const BASE_URL = "http://localhost:3000";

    const onChange = e => {
        setContent(e.target.files[0]);
      };

    const onSubmit = e => {
        e.preventDefault();
        const formData = new FormData();
        formData.append("img", content); 
        axios
          .post("http://localhost:8080/post/upload", formData)
          .then(res => {
            const { fileName } = res.data;
            console.log(fileName);
            setUploadedImg({ fileName, filePath: `${BASE_URL}/img/${fileName}` });
            alert("The file is successfully uploaded");
          })
          .catch(err => {
            console.error(err);
          });
      };

    return(

    <>
        <form onSubmit={onSubmit}>
          {uploadedImg ? (
            <>
              <img src={uploadedImg.filePath} alt="" />
              <h3>{uploadedImg.fileName}</h3>
            </>
          ) : (
            ""
          )}
          <input type="file" onChange={onChange} />
          <button type="submit">Upload</button>
        </form>
    </>
  
    )
/*
 return(
		<div>
			<aside style={{float: "left"}}>
				<SearchMap loc={location} setLoc={setLocation}></SearchMap>
			</aside>
			<main style={{float: "right"}}>
				<form onSubmit={handleSubmit} enctype="multipart/form-data">
					<div>
						<label>제목</label>
						<input
							type="text"
							name='title'
							//value={title}
							onChange={onChange}
							required
						/>
					</div>
					<div>
						<label>Content</label>
						<textarea
						name='content'
						//value={content}
						onChange={onChange}
						/>
					</div>
					<button style={{height:"50px"}}>wow</button>
                    <div>
                        {imglist}
                        <label className="signup-profileImg-label" htmlFor="profileImg">이미지 추가</label>
                        <input
                            name="image"
                            style={{ display: "none"}}
                            className="signup-profileImg-input"
                            type="file"
                            accept="image/*"
                            id="profileImg"
                            onChange={()=>{saveImgFile()}}
                            ref={imgRef}/>
                    </div>
				</form>
			</main>
		</div>
    )
*/
   
}

/*

*/

export default PostWrite;