aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
authorLibravatarLibravatar Biswakalyan Bhuyan <biswa@surgot.in> 2024-07-25 13:59:41 +0530
committerLibravatarLibravatar Biswakalyan Bhuyan <biswa@surgot.in> 2024-07-25 13:59:41 +0530
commitf80a3c811059a22f91842658aaace9e283a704d1 (patch)
tree75f5b64ce83465b0afb9bc617059fac986c5f14a /src/components
parente0ab73361a8bb3598ced59270e6824aa80b80b48 (diff)
downloadadmin-panel-f80a3c811059a22f91842658aaace9e283a704d1.tar.gz
admin-panel-f80a3c811059a22f91842658aaace9e283a704d1.tar.bz2
admin-panel-f80a3c811059a22f91842658aaace9e283a704d1.zip
added firebase (buggy) and upload feature to the site
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Admin.js2
-rw-r--r--src/components/Upload.js54
2 files changed, 56 insertions, 0 deletions
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;