파일업로드, 파일정보수정 [storage,database저장]

 

<Storgae 설정>

 

 

<database 설정>

 

 

 

function UserPanel() {

    const user = useSelector(state => state.user.currentUser)
    const inputOpenImageRef = useRef() //드랍다운에 파일업로드 입히는법 



    const handleLogout = ()=>{ //firebase 로그아웃
        firebase.auth().signOut()
    }
    const handleOpenImageRef = ()=>{
        inputOpenImageRef.current.click(); //type 파일인 input도 같이 클릭되게함
    }


        const handleUploadImage = async (event)=>{ //파일업로드(프로필사진변경)
        const file = event.target.files[0]
        const metadata = {contentType: file.type}
        
        //storage에 파일저장
        try{ 
            let uploadTaskSnapshot = await firebase.storage().ref().child(`user_image/${user.uid}`).put(file, metadata)  //user_image폴더안에 user.uid이름으로 저장
            let downloadURL = await uploadTaskSnapshot.ref.getDownloadURL() //storage에 올린 이미지url(promise니까 await로)
            
            // 프로필 이미지 수정(authentication)
            await firebase.auth().currentUser.updateProfile({
                photoURL: downloadURL
            })

            dispatch(setPhotoURL(downloadURL)) //리덕스안의 user의 photoURL 변경

            //realtime 데이터베이스 이미지 수정
            firebase.database().ref("users").child(user.uid).update({image:downloadURL  })
        }catch(err){
            console.log(err)
        }
    }


    return (
        <div>
            <h3 style={{ color: 'white' }}><IoIosChatboxes />{" "}Chat App</h3>
            <div style={{ display: 'flex', marginBottom: '1rem' ,marginTop: '1rem',marginLeft: '1rem'}}>
                <Image src={user && user.photoURL} roundedCircle style={{width:'30p',height:'30px',marginTop:'3px'}}/>
                <DropdownButton variant="outline-secondary" title={user && user.displayName} style={{backgroundColor:'#a3a7f0'}} >
                    <Dropdown.Item onClick={handleOpenImageRef}>사진변경</Dropdown.Item>
                    <Dropdown.Item onClick={handleLogout}>로그아웃</Dropdown.Item>
                </DropdownButton>
            </div>
            <input accept ="image/jpeg, image/png"  style={{display:'none'}} type="file" ref={inputOpenImageRef} onChange={handleUploadImage} />
        </div>
    )
}

export default UserPanel

 

 

 

file,metadata 설정후  storage에 저장 -> storage에서 URL 다운로드후  -> auth 유저의 프로필URL 변경  , 리덕스 dbwj 프로필URL도 변경 -> database 유저 프로필URL도 변경

 

 

 

파일아닌 데이터는 db에 저장하고 db에 데이터 받고 렌더링해주면됨