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;