[firebase storage] javascript 사용법(최신버전)

storage에 파일 업로드방법

업로드 컴포넌트

export default function MakeTweet() {
  const [preview, setPreview] = useState(null);
  const [file, setFile] = useState(null);
  
  function uploadFile({target: {files}}) {
    if(!file) return;
    const [file] = files;
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = ({ target: {result}}) => {
      // result : ''
      setPreview(result);
    } 
  }
  
  return (
    <form>
      <input type="file" accept="image/*" onChange={uploadFile}/>
    </form>
  )
}

 

 

업로드 firebase 함수

import {
  getStorage,
  ref,
  uploadString,
  getDownloadURL,
} from "firebase/storage";
import { v4 as uuidv4 } from "uuid";

async function uploadSubmitFile(userId, fileUrl) {
  const storage = getStorage(app, "storage 주소");
  // 참조 생성 임의로 userId로 폴더를 만들고, uuid 라리브러리를 사용해서 고유 id값을 생성해서 없는 참조를 만들어 줌
  const storageRef = ref(storage, `${userId}/${uuidv4()}`)
  try {
    await uploadString(storageRef, fileUrl, "data_url");
    // 업로드한 파일 참조로부터 이미지 참조 url을 받아옴
    return await getDownloadURL(storageRef);
  } catch(error) {
    throw new Error(error);
  }
}

 

 

storage에 저장된 파일 삭제하기

https://firebase.google.com/docs/storage/web/delete-files?hl=ko

삭제 컴포넌트

import { deleteSubmitTweet } from "plugins/firebase";

export default Twwet() {
  /**
   * @description 트위터 삭제
   */
  async function deleteTweet() {
    try {
      // firestore docs 삭제 + storage 파일 삭제
      await deleteSubmitTweet(tweetObj.id, tweetObj.storageUrl);
    } catch (error) {
      alert(error);
    }
  }
  
  return (
    <>
      트윗
      <button onClick={deleteTweet}>삭제</button>
    </>
  ) 
}

 

 

파이어베이스 코드

storage에 저장된 파일 url을 가지고 참조를 만들어 낼 수 있음.

/**
 * @description firestore document 삭제 + storage 이미지 파일 삭제 함수 호출
 * @param {*} imageUrl storage url
 */
async function deleteSubmitTweet(tweetId, imageUrl) {
  try {
    const fDocument = doc(db, "tweet", tweetId);
    // Remove the 'capital' field from the fDocument
    await deleteDoc(fDocument);
    await deleteStorageFile(imageUrl);
  } catch (error) {
    throw new Error(error);
  }
}

/**
 * @description storage 이미지 파일 삭제
 * @param {*} imageUrl storage url
 */
async function deleteStorageFile(imageUrl) {
  try {
    const storage = getStorage();
    const rootRef = ref(storage, imageUrl); //⭐️ 이미지 storage url인데, 이거를 가지고 참조를 만들어도, 해당 이미지파일로 참조를 잡음.
    await deleteObject(rootRef);
  } catch (error) {
    throw new Error(error);
  }
}