firebase에서 이미지나 데이터는 cloud storage에 따로 저장이 된다.
import { ref, uploadString, getDownloadURL } from "firebase/storage";
const [nweet, setNweet] = useState("");
const [attachment, setAttachment] = useState();
const onSubmit = async (event) => {
event.preventDefault();
let attachmentUrl = "";
if (attachment !== "") {
const fileRef = ref(storageService, `${userObj.uid}/${uuidv4()}`);
const response = await uploadString(fileRef, attachment, "data_url");
attachmentUrl = await getDownloadURL(response.ref);
}
const newNweet = {
text: nweet,
createdAt: Date.now(),
createId: userObj.uid,
attachmentUrl,
};
await addDoc(collection(dbService, "nweets"), newNweet);
setNweet("");
setAttachment("");
};
const onFileChange = (event) => {
const {
target: { files },
} = event;
const theFile = files[0];
const reader = new FileReader();
reader.onloadend = (finishedEvent) => {
const {
currentTarget: { result },
} = finishedEvent;
setAttachment(result);
};
reader.readAsDataURL(theFile);
};
const onDeleteClick = async () => {
const ok = window.confirm("Are you sure you want to delete this nweet?");
if (ok) {
await deleteDoc(doc(dbService, "nweets", `${nweetObj.id}`));
if (nweetObj.attachmentUrl) {
await deleteObject(ref(storageService, nweetObj.attachmentUrl));
}
}
};
앱의 firebaseConfig 객체에 버킷 URL과 함께 storageBucket 속성을 추가
FileReader 인스턴스를 생성하여 비동기적으로 파일을 읽어드린다.
onloadend 이벤트, 파일 읽기가 끝나면 실행 onloadend 이벤트가 발생하면 result를 setAttachement()에 넣는다. 첨부파일 미리보기에 활용
readAsDataURL 는 파일에서 DATA URI를 얻어서 result 속성에 담는다.
ref()를 사용하여 파일을 저장할 참조를 만든다.
uplaodString() 은 파일을 문자열로 저장할 때 사용하는데. 파일의 참조와, 문자열, 타입을 넣는다.
getDownloadURL()로 파일의 URL을 가져온뒤 nweet 객체를 생성하여 firestore에 추가한다.
파일의 삭제는 deleteObject() 메소드에 참조를 넣는다.