[Next] Firebase Storage 이미지 업로드 / URL 받아오기

Firebase 연동하기

 

const [file, setFile] = useState<File | null>(null);

const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
	const selectedFile = e.target.files && e.target.files[0];
	setFile(selectedFile);
}

input을 통해 파일을 선택하면 file state로 관리하고 버튼 클릭 시 그 파일을 storage에 업로드 후 url을 받아오려고 한다.

 

import app from '@/app/firebase'
import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";

const storage = getStorage(app);

 const handleSubmit = async (e: FormEvent) => {
        e.preventDefault();
        try {
        if(file !== null) {
            const storageRef = ref(storage, 'images/' + file?.name);
            await uploadBytes(storageRef, file);
            const url = await getDownloadURL(storageRef);
    	} catch(err) {
        	...
        }
}

firebase storage에서 getStorage, ref, uploadBytes, getDownloadURL 함수 불러오기

getStorage()는 나중에 파일 업로드, 다운로드 작업을 수행하는데 사용

 

ref()로 업로드할 파일을 저장할 경로를 설정하는데 images 폴더 안에 해당 파일 이름으로 저장하려고 한다. 

uploadBytes()로 설정한 경로에 파일을 저장 하는데 뒤에 file이 업로드할 파일을 가리킨다.

업로드가 됐다면 storageRef 해당 경로에 있는 파일을 getDownloadURL()를 사용해서 이미지 url을 받아올 수 있다.

 

저장된 url 잘 가져와지는 거 확인!