Beomlog - Profile Img Upload, Firestore Cloud Storage

프로필 이미지를 업로드 하는 공간을 마련하기 위해서 Firestore Cloud Storage를 쓰려고 한다. 당연히 가장 쉬운 Storage 방식이기도 하고, 이미 기반이 마련이 되어있기 때문에 여기에 이미지를 지정된 이름으로 저장한 후 불러오는 것으로 하려고 한다.

 

근데 생각해보니 기존 post들의 저장방식에는 사용자의 userData를 그대로 같이 업로드하고 있었는데, 이렇게 생각하니 만약 그렇다면 userData가 바뀐다면 post에 있는 모든 userData를 바꿔줘야 하는데, 그건 굉장히 비효율적이라고 생각해서, 그냥 글쓴이 uid를 바탕으로 userData를 불러오는 것으로 바꾸기로 했다.

 

먼저 Cloud Firestore Storage를 연결을 해보자.

App.tsx에서 initializeApp을 해준 후에 하지 않으면 자꾸 에러가 나길래 App.tsx에서 initializeApp을 한 후 선언후고 export해주어 api firebase에서 관리하도록 하게 했다. 그러면 firebase api에서는

 

이러한 작업을 처리해준다. uid와 file을 가져온 후, filename 을 uid_file원래이름 으로 저장한다. 그 후, 그 fileRef에 file을 저장한다. 그러면 storage로 file이 업로드 되는데, 그 후 getDownloadUrl()을 하여 downloadUrl을 가져오고, 그걸 다시 database의 user 컬렉션의 유저uid 도큐먼트에서 업데이트 해주어 프로필이미지url을 업데이트해준다.

 

그리고 이를 UserSettingsContainer에서 Submit버튼을 누를때 자동적으로 처리를 하게 해주었다. 그리고 프로필 이미지를 업로드하면 임시url을 받아와서 그 이미지를 미리 띄워주도록 하게 만들었는데, 이는 다음과 같이 했다.

 

먼저 file 업로드를 위한 input을 만들어준다.

그 후, onChange는 다음과 같이 설정했다.

여기서 fr은 FileRead라는 객체이다. 이를 이용하면 file의 임시 장소를 알아낼 수 있고, 따라서 그를 이미지에 미리 띄울수 있다. fr은 다음과 같이 준비해 주었다.

그 후, submit 버튼에 위 비동기 작업을 처리해준다. 먼저 onClick 함수를 async 함수로 바꾸고 try 작업 중간에 await 비동기로 위 함수를 넣어주었다. 그 후 실행해보면,

 

잘 된다.