upload img to storage from website

src > Firebase.js (新規作成)

Firebaseに新しいプロジェクトを作成して、Storageをつくっておくこと

コンソールに表示されるソースコードをコピーしてfirebase.jsに貼り付けた後、

ストレージを取得するために2文追加する

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getStorage } from 'firebase/storage'; <--追加
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyBZlJUorjAJb2QYXkAh_cylYImaLkgbxsk",
  authDomain: "reactpj3.firebaseapp.com",
  projectId: "reactpj3",
  storageBucket: "reactpj3.appspot.com",
  messagingSenderId: "231702070393",
  appId: "1:231702070393:web:d48c75d82511efee91c0a8"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const storage = getStorage(app); <--追加

export default storage;

ImageUploader.js

import React from 'react';
import storage from './firebase';
import { ref, uploadBytes } from 'firebase/storage';

const ImageUploader = () => {
  const OnFileUploadToFirebase = (e) => {
    // 画像の名前を取得する
    console.log(e.target.files);
    const file = e.target.files[0];
    
    // FirebaseStorageのパスを指定する
    const storageRef = ref(storage, 'image/' + file.name);
    
    // FIrebaseStorageにアップロードする
    uploadBytes(storageRef, file).then( (snapshot) => {
      console.log('UPLOADED!'):
    });
  };
  
  return (
    <div>
      <p>ここにドラッグ&ドロップ(またはファイルを選択)</p>
      <input
        type='file'
        className='imageUploadInput'
        name='imageURL'
        accept='.png, .jpeg, .jpg'
        onChange={ImageUploadToFirebase}
      />
    </div>
  );
}

App.js

import ImageUploader from './ImageUploader';
function App() {
  return (
    <div class='App'>
      <ImageUploader />
    </div>
  );
}
export default App;