React: [Error] Firebase 사용자 photoURL

 

 

firebase를 이용하여 사용자 관리에서 이미지를 처음에는 velog처럼 파일로 업로드 하기 위해서 데스크탑에서 파일을 찾아 업로드하는 코드를 짜고 firebase에서 기본으로 제공해주는 user의 photoURL 속성에 업로드하려하였는데

다음과 같은 오류가 떴다.

 

이를 해결하는 과정이 너무 오래걸려서 정리해보려고 한다. 

처음에는 디버깅 창에 Photo URL too long이라는 오류가 떠서 파일 data url의 길이가 길어서 생기는 오류라고 생각했다. 

 

 

파일 업로드 코드 

  const [ImageUrl, setImageUrl] = useState(null);
  const { userInfo, setUserInfo } = useUserInfoStore();
  //...
  
const handleProfile = (e) => {
    e.preventDefault();
    const { files } = e.target;
    const uploadFile = files[0];
    const reader = new FileReader();
    reader.readAsDataURL(uploadFile);
    reader.onloadend = () => {
      setImageUrl(reader.result);
      userInfo.profileUrl = ImageUrl;
      setUserInfo(userInfo);
      updateProfile(auth.currentUser, {
        photoURL: ImageUrl,
      })
        .then(() => {
          console.log("success");
        })
        .catch((error) => {
          console.log(error);
        });
    };
  };
  //..

 

file을 DataURL로 읽어서 userInfo에 저장하고 해당 dataurl을 firebase의 프로필로 업데이트 했다. 

=> 전역으로 local에서는 업로드 되지만 서버에 저장되지 않음

 

컴포넌트 코드 

 <img src={userInfo.profileUrl} img="img" />
            <label for="file">이미지 업로드</label>
            <input
              type="file"
              accept="image/*"
              id="file"
              onChange={handleProfile}
            />

 

이게 처음 코드이다.  

 

 

 

해결시도1.  새로운 user의 document를 firebase에 저장하여 user의 profile 속성에 업로드하기

-> 복잡해서 실패

 

 

photo URL은 웹사이트 상에 존재하는 image url만 제공한다는 사실을 알게되었고 코드를 아예바꾸었다. 

 

input에 사진의 image url을 입력하게 하고, 이미지 업로드 버튼을 누루면 전송이 되고 전역의 user profile이 바뀌도록 설정하였다. 

 

 

firebase에도 잘 업데이트 됨

 

수정한 코드

파일 업로드 코드 

const handleProfile = (e) => {
    const url = e.target.value;
    setImageUrl(url);
  };
  const submitProfile = () => {
    userInfo.profileUrl = ImageUrl;
    setUserInfo(userInfo);
    console.log(ImageUrl);
    updateProfile(appAuth.currentUser, {
      photoURL: ImageUrl,
    })
      .then(() => {
        console.log("success");
      })
      .catch((error) => {
        console.log(error);
      });
  };

컴포넌트 코드 

  <img src={userInfo.profileUrl} img="img" />
            <button onClick={submitProfile}>이미지 업로드(사진 url)</button>
            <input
              type="text"
              value={ImageUrl}
              onChange={(e) => {
                handleProfile(e);
              }}
            />