[R09M App] CreateRoom 페이지 - 파일업로드 이슈

[jellyjoji]

내용

파일 업로드 기능을 FileUpload.jsx 파일에 구현하여 아래와 같이 컴포넌트로 제작하였습니다. 파일업로드 컴포넌트로 업로드한 파일을 pocketHost 에 있는 form data 로 전송을 해야하는 상황입니다. 해당 양식에 맞게 파일을 첨부하여 pocketHost 에 전송에 성공하였으나 파일 미업로드시에는 아래와 같이 에러메세지가 뜹니다. 파일 미업로드시 에러메세지를 예방하는 법을 문의합니다.

import { useState, forwardRef } from "react";
import { imgUpload } from '../../assets/icons/svg-icons'

function FileUpload({ }, ref) {

  const [fileImages, setFileImages] = useState(null);

  const handleFileUpload = (e) => {
    const { files } = e.target;
    const fileImages = Array.from(files).map((file) => ({
      image: URL.createObjectURL(file),
      label: file.name,
    }));
    setFileImages(fileImages);

    // img file const 
    console.log(photoRef.current.files);
    const photoValue = photoRef.current.files;

    if (!photoValue) {
      // toast message here
      return
    }
  };

  return (<>
    <div >
      <label htmlFor="photo" className="sr-only">
        사진 등록
      </label>
      <input
        type="file"
        accept="image/jpg,image/png,image/jpeg,image/webp,image/avif"
        name="photo"
        id="photo"
        ref={ref}
        onChange={handleFileUpload}
        className=""
      />
      <div className="" >
        {!fileImages && (
          <img
            src={imgUpload}
            alt="photo"
            className="w-24"
          />
        )}
        {fileImages?.map((file) => {
          return (
            <img
              key={file.label}
              src={file.image}
              alt={file.label}
              className=""
            />
          );
        })}
      </div>
    </div>
  </>)
}
export default forwardRef(FileUpload);

아래 코드를 적용시켜보았지만 똑같은 에러메세지가 나는 상황입니다. 파일 미업로드시 뜨는 에러를 어떻게 예방해야할까요?

 } catch (error) {
       if (!(error instanceof ClientResponseError)) {
         console.error(error);
       }}

참고 이미지 (선택)

※ 댓글에 이슈 해결 완료 후 결과 또는 해결 과정 이미지 첨부

[jellyjoji]

문제 원인

업로드 할 파일이 없는데 uploadImage 값을 추가하기 때문입니다.

CreateRoom.jsx

data.append('uploadImage', uploadImageValue); // **invalid formatting**

문제 해결

업로드 할 파일이 있을 경우에만 uploadImage 값을 추가합니다.

CreateRoom.jsx

**if (uploadImageValue) {**
  data.append('uploadImage', uploadImageValue);
**}**