3월11일 TIL

Image Uploader 사용

• 이미지 Uploader같은 경우는 프로필, 타이틀이 같이 있다보니 컴포넌트로 분리해서 같은곳에서 사용 가능하도록 했음

이미지 업로더 컴포넌트

1. Preview 이미지를 저장할 상태값을 만든다
   1-1 Default 상태값은 profileImageUrl(이전이미지)
   1-2 제코드는 백앤드와 협의하에 이미지가 아무값도 없을때는 default이미지가 들어가게 설정해뒀음

  const [previewImage, setPreviewImage] = useState<string | null>(
    props.profileImageUrl
  );

2. 이미지 업로드를 감지할 Ref를 설정

const imageRef = useRef<HTMLInputElement | null>(null);

3. 이미지를 업로드할 Handler 함수를 작성
   3-1 여기서 Privew Image Url은 URL.createObjectURL로 만들수있음

const imageUploadHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedImage = e.target.files && e.target.files[0];
    //10MB제한
    if (e.target.files && e.target.files[0].size > 10485760) {
      alert("이미지 파일의 크기는 10Mb입니다!");
    }
    // image정보가 있다면
    if (selectedImage) {
      setPreviewImage(
        URL.createObjectURL(e.target.files && (e.target.files[0] as any))
      );
    }
    props.setImageFile(e.target.files && e.target.files[0]);
  };

최종 전체코드

export default function ImageUploader(props: Props) {
  const [previewImage, setPreviewImage] = useState<string | null>(
    props.profileImageUrl
  );

  useEffect(() => {
    setPreviewImage(props.profileImageUrl);
  }, [props.profileImageUrl]);

  const imageRef = useRef<HTMLInputElement | null>(null);
  const imageUploadHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedImage = e.target.files && e.target.files[0];
    //10MB제한
    if (e.target.files && e.target.files[0].size > 10485760) {
      alert("이미지 파일의 크기는 10Mb입니다!");
    }
    // image정보가 있다면
    if (selectedImage) {
      setPreviewImage(
        URL.createObjectURL(e.target.files && (e.target.files[0] as any))
      );
    }
    props.setImageFile(e.target.files && e.target.files[0]);
  };

  return (
    <>
      <div className="Plus_Container">
        <FcPlus
          className={
            props.usage === "Title"
              ? "Title_Image_Add_Icon"
              : "Profile_Image_Add_Icon"
          }
          onClick={() => imageRef.current?.click()}
        />
      </div>
      <input
        className="Uploard_Input"
        ref={imageRef}
        type={"file"}
        onChange={(e) => {
          imageUploadHandler(e);
        }}
      />
      <img
        className={
          props.usage === "Title" ? "Thumbnail_Image" : "Member_Profile_Image"
        }
        src={`${previewImage}`}
      />
    </>
  );
}