From 55aed6d7c2df0daedbdabea0d1727acb1815ce2b Mon Sep 17 00:00:00 2001 From: Biswakalyan Bhuyan Date: Fri, 26 Jul 2024 21:21:03 +0530 Subject: added upload feature --- src/components/UploadForm.jsx | 45 +++++++++++++++++++++++++++++++++++++++++++ src/components/ViewAds.jsx | 33 +++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+) create mode 100644 src/components/UploadForm.jsx create mode 100644 src/components/ViewAds.jsx (limited to 'src/components') diff --git a/src/components/UploadForm.jsx b/src/components/UploadForm.jsx new file mode 100644 index 0000000..9bb16e7 --- /dev/null +++ b/src/components/UploadForm.jsx @@ -0,0 +1,45 @@ +import React, { useState } from 'react'; +import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage'; +import { storage } from '../firebase'; + +const UploadForm = ({ onUploadComplete }) => { + const [file, setFile] = useState(null); + const [progress, setProgress] = useState(0); + + const handleFileChange = (e) => { + setFile(e.target.files[0]); + }; + + const handleUpload = () => { + if (!file) return; + + const storageRef = ref(storage, `ads/${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) => { + onUploadComplete(downloadURL); + }); + } + ); + }; + + return ( +
+ + +
Upload Progress: {progress}%
+
+ ); +}; + +export default UploadForm; diff --git a/src/components/ViewAds.jsx b/src/components/ViewAds.jsx new file mode 100644 index 0000000..719d1b2 --- /dev/null +++ b/src/components/ViewAds.jsx @@ -0,0 +1,33 @@ +import React, { useEffect, useState } from 'react'; +import { ref, listAll, getDownloadURL } from 'firebase/storage'; +import { storage } from '../firebase'; + +const ViewAds = () => { + const [ads, setAds] = useState([]); + + useEffect(() => { + const fetchAds = async () => { + const adsRef = ref(storage, 'ads/'); + const adList = await listAll(adsRef); + const adUrls = await Promise.all(adList.items.map((item) => getDownloadURL(item))); + setAds(adUrls); + }; + + fetchAds(); + }, []); + + return ( +
+

View Ads

+
+ {ads.map((url, index) => ( +
+ {`Ad +
+ ))} +
+
+ ); +}; + +export default ViewAds; -- cgit v1.2.3-59-g8ed1b