diff options
-rw-r--r-- | .gitignore | 1 | ||||
-rw-r--r-- | src/components/Admin.js | 2 | ||||
-rw-r--r-- | src/components/Upload.js | 54 | ||||
-rw-r--r-- | src/firebase.js | 16 |
4 files changed, 73 insertions, 0 deletions
@@ -13,6 +13,7 @@ # misc .DS_Store +.env .env.local .env.development.local .env.test.local diff --git a/src/components/Admin.js b/src/components/Admin.js index aeb8bf6..15696e0 100644 --- a/src/components/Admin.js +++ b/src/components/Admin.js @@ -1,5 +1,6 @@ import React, { useEffect, useState } from 'react'; import axios from 'axios'; +import Upload from './Upload'; function Admin() { const [message, setMessage] = useState(''); @@ -28,6 +29,7 @@ function Admin() { <div className="Admin"> <h2>Admin Panel</h2> <p>{message}</p> + <Upload /> </div> ); } diff --git a/src/components/Upload.js b/src/components/Upload.js new file mode 100644 index 0000000..6308fda --- /dev/null +++ b/src/components/Upload.js @@ -0,0 +1,54 @@ +import React, { useState } from 'react'; +import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage'; +import { storage } from '../firebase'; + +function Upload() { + const [file, setFile] = useState(null); + const [progress, setProgress] = useState(0); + const [url, setUrl] = useState(''); + + const handleFileChange = (e) => { + if (e.target.files[0]) { + setFile(e.target.files[0]); + } + }; + + const handleUpload = () => { + if (!file) { + alert('Please choose a file first!'); + return; + } + + const storageRef = ref(storage, `uploads/${file.name}`); + const uploadTask = uploadBytesResumable(storageRef, file); + + uploadTask.on( + 'state_changed', + (snapshot) => { + const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; + setProgress(progress); + }, + (error) => { + console.error('Upload failed', error); + }, + () => { + getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { + setUrl(downloadURL); + alert('File uploaded successfully!'); + }); + } + ); + }; + + return ( + <div className="Upload"> + <h2>Upload Content</h2> + <input type="file" onChange={handleFileChange} /> + <button onClick={handleUpload}>Upload</button> + <p>Upload Progress: {progress}%</p> + {url && <p>File URL: <a href={url} target="_blank" rel="noopener noreferrer">{url}</a></p>} + </div> + ); +} + +export default Upload; diff --git a/src/firebase.js b/src/firebase.js new file mode 100644 index 0000000..5ec00da --- /dev/null +++ b/src/firebase.js @@ -0,0 +1,16 @@ +import { initializeApp } from 'firebase/app'; +import { getStorage } from 'firebase/storage'; + +const firebaseConfig = { + apiKey: process.env.REACT_APP_FIREBASE_API_KEY, + authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, + projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, + storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET, + messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID, + appId: process.env.REACT_APP_FIREBASE_APP_ID, +}; + +const app = initializeApp(firebaseConfig); +const storage = getStorage(app); + +export { storage }; |