파이어베이스를 이용한 이미지 업로드

Firebase 설정 (아래 설정 참조)

리액트와 파이어베이스를 이용한 이미지 업로드 : React image upload (feat.Firebase)

api/firebase.js

import firebase from "firebase/compat/app";
import "firebase/compat/storage";

const firebaseConfig = {
  apiKey: "AIzaSyDqc3jZo2Kj2bgAVgxTC9su0P1N9kLe-Hg",
  authDomain: "kh-mini-project.firebaseapp.com",
  projectId: "kh-mini-project",
  storageBucket: "kh-mini-project.appspot.com",
  messagingSenderId: "106733687469",
  appId: "1:106733687469:web:f094788d000284bafa6c24",
  measurementId: "G-1RW6SQ37MW"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export const storage = firebase.storage();

pages/ImageUploader.js

import React, { useState } from 'react';
import { storage } from '../api/firebase';

const ImageUploader = () => {
  const [file, setFile] = useState(null);
  const [url, setUrl] = useState('');

  const handleFileInputChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleUploadClick = () => {
    const storageRef = storage.ref();
    const fileRef = storageRef.child(file.name);
    fileRef.put(file).then(() => {
      console.log('File uploaded successfully!');
      fileRef.getDownloadURL().then((url) => {
        console.log("저장경로 확인 : " + url);
        setUrl(url);
      });
    });
  };

  return (
    <div>
      <input type="file" onChange={handleFileInputChange} />
      <button onClick={handleUploadClick}>Upload</button>
      {url && <img src={url} alt="uploaded" />}
    </div>
  );
}

export default ImageUploader;