이미지 업로드를 위해서 firebase/storage 에서 import를 해주어야 한다.
import getStorage, ref, uploadBytes, listAll, getDownloadURL,} from "firebase/storage";
import firebaseApp from "../../Firebase";
const storage = getStorage(firebaseApp);
import firebaseApp from "../../Firebase";
의 경우는 firebase.js 파일에서 가져온 firebase 파일이다.
const [imageUpload, setImageUpload] = useState(null);
const [imageList, setImageList] = useState([]);
파일 업로드 시 업로드한 파일을 담아둘 imageUpload state
업로드 된 파일을 불러올 imageList state
const upload = () => {
if (imageUpload === null) return;
const imageRef = ref(storage, `images/${imageUpload.name}`);
// `images === 참조값이름(폴더이름), / 뒤에는 파일이름 어떻게 지을지
uploadBytes(imageRef, imageUpload).then((snapshot) => {
// 업로드 되자마자 뜨게 만들기
getDownloadURL(snapshot.ref).then((url) => {
setImageList((prev) => [...prev, url]);
});
//
});
};
이미지가 업로드되지 않았으면 return해준다.
const imageRef
는 참조값(스토리지의 폴더명)을 만들고
ref(스토리지폴더명, 파일이름양식)으로 하여 참조값과 이미지를 업로드해서 담아둔다.
uploadBytes를 이용해서 파일을 업로드 하자마자 올라가게 만들어 준다.
getDownloadURL를 이용해서 다운로드한 이미지를 setImageList로 올려준다.
useEffect(() => {
listAll(imageListRef).then((response) => {
response.items.forEach((item) => {
getDownloadURL(item).then((url) => {
setImageList((prev) => [...prev, url]);
});
});
});
}, []);
listAll
메서드를 이용해서 이미지 리스트를 불러온다.
<input
type="file"
onChange={(event) => {
setImageUpload(event.target.files[0]);
}}
/>
<button onClick={upload}>업로드</button>
{imageList.map((el) => {
return <img key={el} src={el} />;
})}
import firebaseApp from "../../Firebase";
import React, { useState, useEffect } from "react";
import getStorage, ref, uploadBytes, listAll, getDownloadURL,} from "firebase/storage";
function FireBaseExample(props) {
const [imageUpload, setImageUpload] = useState(null);
const [imageList, setImageList] = useState([]);
const storage = getStorage(firebaseApp);
const imageListRef = ref(storage, "images/");
const upload = () => {
if (imageUpload === null) return;
const imageRef = ref(storage, `images/${imageUpload.name}`);
uploadBytes(imageRef, imageUpload).then((snapshot) => {
getDownloadURL(snapshot.ref).then((url) => {
setImageList((prev) => [...prev, url]);
});
});
};
useEffect(() => {
listAll(imageListRef).then((response) => {
response.items.forEach((item) => {
getDownloadURL(item).then((url) => {
setImageList((prev) => [...prev, url]);
});
});
});
}, []);
return (
<div>
<input
type="file"
onChange={(event) => {
setImageUpload(event.target.files[0]);
}}
/>
<button onClick={upload}>업로드</button>
{imageList.map((el) => {
return <img key={el} src={el} />;
})}
</div>
);
}
export default FireBaseExample;