From 6c31b7882095eddfa095a789e0306c4ae6e846d1 Mon Sep 17 00:00:00 2001 From: Shubham-Samanta <77207634+Shubham-Samanta@users.noreply.github.com> Date: Tue, 27 Apr 2021 01:50:49 +0530 Subject: [PATCH 1/6] changes in users collection --- src/Component/Upload/Upload.js | 14 ++++++-------- src/Component/alter login/form/signup.js | 3 ++- src/Component/firebase/Config.js | 3 ++- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/Component/Upload/Upload.js b/src/Component/Upload/Upload.js index dd539c6..8b8b6e7 100644 --- a/src/Component/Upload/Upload.js +++ b/src/Component/Upload/Upload.js @@ -1,6 +1,6 @@ import react, { useState, useEffect } from "react" import ProgressBar from '../Upload/ProgressBar' -import { auth, projectStorage, firebaseApp ,projectfirestore,timestamp,increments} from "../firebase/Config" +import { auth, projectStorage, firebaseApp ,projectfirestore,timestamp,increments,arrayadd} from "../firebase/Config" import classes from "../Upload/upload.module.css"; import { useDropzone } from 'react-dropzone' @@ -13,7 +13,7 @@ const Upload = (props) => { const [file, setFile] = useState(null); const [error, setError] = useState(null); const [url, setUrl] = useState(null); - const [firebaseurl, setfirebaseUrl] = useState(null); + const [upstyle,setUpStyle] = useState({display:"block"}); const [progstyle,setProgStyle] = useState({display:"none"}); const {setModal}=props; @@ -51,14 +51,12 @@ const Upload = (props) => { name: file.name, tag:tagImg }) - var c = doc.data().totalupload; + projectfirestore.collection('users').doc(auth.X).update({ totalupload: increments, - }) - projectfirestore.collection('users').doc(auth.X).collection('photos').doc("pic"+doc.data().totalupload).set({ - url:Url, - }) - setfirebaseUrl(Url) + uploadsurl:arrayadd.arrayUnion(Url) + }) + }) }else{ console.log("doesn't exists") diff --git a/src/Component/alter login/form/signup.js b/src/Component/alter login/form/signup.js index cacc5f9..5df6776 100644 --- a/src/Component/alter login/form/signup.js +++ b/src/Component/alter login/form/signup.js @@ -30,7 +30,8 @@ const Signup = ()=>{ name: username, email:email, interests: [], - totalupload: 0 + totalupload: 0, + uploadsurl:[] }); // ... }) diff --git a/src/Component/firebase/Config.js b/src/Component/firebase/Config.js index aa86815..727c172 100644 --- a/src/Component/firebase/Config.js +++ b/src/Component/firebase/Config.js @@ -19,4 +19,5 @@ const projectStorage = firebaseApp.storage(); const projectfirestore = firebaseApp.firestore(); const increments = firebase.firestore.FieldValue.increment(1); const timestamp = firebase.firestore.FieldValue.serverTimestamp; -export { projectfirestore, projectStorage, firebaseApp,auth,timestamp,increments}; \ No newline at end of file +const arrayadd = firebase.firestore.FieldValue; +export {arrayadd, projectfirestore, projectStorage, firebaseApp,auth,timestamp,increments}; \ No newline at end of file From d47cff294ec9ccb85a044ddf44e3f2b17a6ada68 Mon Sep 17 00:00:00 2001 From: Shubham-Samanta <77207634+Shubham-Samanta@users.noreply.github.com> Date: Tue, 27 Apr 2021 02:23:38 +0530 Subject: [PATCH 2/6] ssd --- src/Component/Upload/Upload.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Component/Upload/Upload.js b/src/Component/Upload/Upload.js index 14fba22..8fb43a0 100644 --- a/src/Component/Upload/Upload.js +++ b/src/Component/Upload/Upload.js @@ -57,7 +57,8 @@ const Upload = (props) => { uploadsurl:arrayadd.arrayUnion(Url) }) - }) + }) + setTagImg([]); }else{ console.log("doesn't exists") } From 624806c8ea25648af92bae35bed73c1ed565df00 Mon Sep 17 00:00:00 2001 From: Shubham-Samanta <77207634+Shubham-Samanta@users.noreply.github.com> Date: Thu, 29 Apr 2021 21:06:05 +0530 Subject: [PATCH 3/6] changes the upload structure in firebase --- src/Component/Upload/Upload.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Component/Upload/Upload.js b/src/Component/Upload/Upload.js index 8fb43a0..5fe3b48 100644 --- a/src/Component/Upload/Upload.js +++ b/src/Component/Upload/Upload.js @@ -45,12 +45,14 @@ const Upload = (props) => { }, async () => { const Url = await mountainImagesRef.getDownloadURL(); const createdAt = timestamp(); - uploadRef.doc(auth.X+""+doc.data().totalupload).set({ + uploadRef.doc(auth.X+""+doc.data().totalupload).set({pic:arrayadd.arrayUnion({ url: Url, - createdAt: createdAt, name: file.name, tag:tagImg - }) + }), + createdAt: createdAt, + } + ) projectfirestore.collection('users').doc(auth.X).update({ totalupload: increments, From 627c4c4814b64ee3ace6d11fd1753b2d0aff6206 Mon Sep 17 00:00:00 2001 From: Shubham-Samanta <77207634+Shubham-Samanta@users.noreply.github.com> Date: Fri, 30 Apr 2021 10:38:31 +0530 Subject: [PATCH 4/6] wierd changes --- src/Component/Upload/Upload.js | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/Component/Upload/Upload.js b/src/Component/Upload/Upload.js index 5fe3b48..a1a28aa 100644 --- a/src/Component/Upload/Upload.js +++ b/src/Component/Upload/Upload.js @@ -1,6 +1,6 @@ import react, { useState, useEffect } from "react" import ProgressBar from '../Upload/ProgressBar' -import { auth, projectStorage, firebaseApp ,projectfirestore,timestamp,increments,arrayadd} from "../firebase/Config" +import { auth, projectStorage, firebaseApp ,projectfirestore,timestamp,increments} from "../firebase/Config" import classes from "../Upload/upload.module.css"; import { useDropzone } from 'react-dropzone' @@ -13,7 +13,7 @@ const Upload = (props) => { const [file, setFile] = useState(null); const [error, setError] = useState(null); const [url, setUrl] = useState(null); - + const [firebaseurl, setfirebaseUrl] = useState(null); const [upstyle,setUpStyle] = useState({display:"block"}); const [progstyle,setProgStyle] = useState({display:"none"}); const {setModal}=props; @@ -45,22 +45,21 @@ const Upload = (props) => { }, async () => { const Url = await mountainImagesRef.getDownloadURL(); const createdAt = timestamp(); - uploadRef.doc(auth.X+""+doc.data().totalupload).set({pic:arrayadd.arrayUnion({ + uploadRef.doc(auth.X+""+doc.data().totalupload).set({ url: Url, + createdAt: createdAt, name: file.name, tag:tagImg - }), - createdAt: createdAt, - } - ) - + }) + var c = doc.data().totalupload; projectfirestore.collection('users').doc(auth.X).update({ totalupload: increments, - uploadsurl:arrayadd.arrayUnion(Url) - }) - - }) - setTagImg([]); + }) + projectfirestore.collection('users').doc(auth.X).collection('photos').doc("pic"+doc.data().totalupload).set({ + url:Url, + }) + setfirebaseUrl(Url) + }) }else{ console.log("doesn't exists") } From e6864e759ae4734a5254035e940032e02b40173c Mon Sep 17 00:00:00 2001 From: Shubham-Samanta <77207634+Shubham-Samanta@users.noreply.github.com> Date: Fri, 30 Apr 2021 10:44:20 +0530 Subject: [PATCH 5/6] upload delete --- src/Component/Upload/Upload.js | 202 --------------------------------- 1 file changed, 202 deletions(-) delete mode 100644 src/Component/Upload/Upload.js diff --git a/src/Component/Upload/Upload.js b/src/Component/Upload/Upload.js deleted file mode 100644 index a1a28aa..0000000 --- a/src/Component/Upload/Upload.js +++ /dev/null @@ -1,202 +0,0 @@ -import react, { useState, useEffect } from "react" -import ProgressBar from '../Upload/ProgressBar' -import { auth, projectStorage, firebaseApp ,projectfirestore,timestamp,increments} from "../firebase/Config" -import classes from "../Upload/upload.module.css"; -import { useDropzone } from 'react-dropzone' - - - -/*firebase logic start*/ -const Upload = (props) => { - - const [progress, setProgress] = useState(0); - const [file, setFile] = useState(null); - const [error, setError] = useState(null); - const [url, setUrl] = useState(null); - const [firebaseurl, setfirebaseUrl] = useState(null); - const [upstyle,setUpStyle] = useState({display:"block"}); - const [progstyle,setProgStyle] = useState({display:"none"}); - const {setModal}=props; - const [tags, setTags] = useState(["black","white","yellow","blue","red","cars","bmw","audi","maruti","lambo","sex","porn","ship","coffee","dani","mia","temple","god","chand","BJP"]) - const [tagImg, setTagImg] = useState([]) - const [search, setSearch] = useState("") - - - const types = ["image/jpeg", "image/png", "image/jpg"]; - - const upload = (e)=>{ - e.preventDefault(); - setUpStyle({display:"none"}); - setProgStyle({display:"block"}); - - var docRef = projectfirestore.collection('users').doc(auth.X); - docRef.get().then((doc)=>{ - if(doc.exists){ - var storageRef = firebaseApp.storage().ref(); - const uploadRef = projectfirestore.collection('upload'); - var mountainImagesRef = storageRef.child(`images/${auth.X}${doc.data().totalupload}`); - mountainImagesRef .put(file).on('state_changed', (snap) => { - let percentage = (snap.bytesTransferred / snap.totalBytes) * 100 - setProgress(percentage) - - }, - (err) => { - setError(err); - }, async () => { - const Url = await mountainImagesRef.getDownloadURL(); - const createdAt = timestamp(); - uploadRef.doc(auth.X+""+doc.data().totalupload).set({ - url: Url, - createdAt: createdAt, - name: file.name, - tag:tagImg - }) - var c = doc.data().totalupload; - projectfirestore.collection('users').doc(auth.X).update({ - totalupload: increments, - }) - projectfirestore.collection('users').doc(auth.X).collection('photos').doc("pic"+doc.data().totalupload).set({ - url:Url, - }) - setfirebaseUrl(Url) - }) - }else{ - console.log("doesn't exists") - } - }) - - - } - - - - - const onDrop = acceptedFiles => { - var selected = acceptedFiles[0]; - - if (selected && types.includes(selected.type)) - { - - setFile(selected); - setError(null); - setUrl(URL.createObjectURL(selected)); - } - else - { - setFile(null); - setError("please select a valid image file(png,jpeg)"); - } - } - const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop}) - - useEffect(() => () => { - // Make sure to revoke the data url to avoid memory leaks - URL.revokeObjectURL(url) - }, [file]); - - useEffect(()=>{ - if(progress === 100){ - setTimeout(()=>{ - setFile(null); - setModal(false); - },1000) - setTimeout(()=>{ - setUpStyle({display:"block"}); - setProgStyle({display:"none"}); - setProgress(0); - }, 2000) - } - - }, [progress]) - - useEffect(()=>{ - console.log(tagImg) - - }, [tagImg]) - - var flag = false; - - return ( -
-
-

Upload Your Walpapers

-
- -
- - { - (file === null)? - (isDragActive ? -

Drop the files here ...

: - (error?

{error}

: -

Drag 'n' drop some files here, or click to select files

)) : - (file && ) - } -
-
- {(progress===100)?

Finished....

:

Uploading....

} -
-
-
-

Setup tags

-
-
-
- {setSearch(e.target.value.toLowerCase())}} /> - { - tagImg && tagImg.map(tag =>( - { - var item = tagImg; - var index = item.indexOf(e.target.value); - var p1 = item.slice(0,(index)) - var p2 = item.slice((index+1),item.length) - setTagImg(p1.concat(p2)) - }} className={classes.selectedTags} /> - )) - } -
-
- { - tags && tags.map(tag =>( - tag.startsWith(search)? - { - tagImg.includes(e.target.value)?setTagImg([...tagImg]):setTagImg([...tagImg, e.target.value]) - }} className={classes.availableTags} disabled={tagImg.length >= 5}/> : null - )) - } - { - tags && tags.map(tag =>( - tag.startsWith(search)?flag = true : null - )) - } - { - !flag? { - setTags([...tags, search]) - setTagImg([...tagImg, search]) - }} - /> : null - } -
- -
-
- - -
- - -
- - ) -} -export default Upload \ No newline at end of file From 97f184817ed6a0339ca943f7b30b6e7b4e6c0cea Mon Sep 17 00:00:00 2001 From: Shubham-Samanta <77207634+Shubham-Samanta@users.noreply.github.com> Date: Fri, 30 Apr 2021 10:45:04 +0530 Subject: [PATCH 6/6] added upload --- src/Component/Upload/Upload.js | 202 +++++++++++++++++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 src/Component/Upload/Upload.js diff --git a/src/Component/Upload/Upload.js b/src/Component/Upload/Upload.js new file mode 100644 index 0000000..a1a28aa --- /dev/null +++ b/src/Component/Upload/Upload.js @@ -0,0 +1,202 @@ +import react, { useState, useEffect } from "react" +import ProgressBar from '../Upload/ProgressBar' +import { auth, projectStorage, firebaseApp ,projectfirestore,timestamp,increments} from "../firebase/Config" +import classes from "../Upload/upload.module.css"; +import { useDropzone } from 'react-dropzone' + + + +/*firebase logic start*/ +const Upload = (props) => { + + const [progress, setProgress] = useState(0); + const [file, setFile] = useState(null); + const [error, setError] = useState(null); + const [url, setUrl] = useState(null); + const [firebaseurl, setfirebaseUrl] = useState(null); + const [upstyle,setUpStyle] = useState({display:"block"}); + const [progstyle,setProgStyle] = useState({display:"none"}); + const {setModal}=props; + const [tags, setTags] = useState(["black","white","yellow","blue","red","cars","bmw","audi","maruti","lambo","sex","porn","ship","coffee","dani","mia","temple","god","chand","BJP"]) + const [tagImg, setTagImg] = useState([]) + const [search, setSearch] = useState("") + + + const types = ["image/jpeg", "image/png", "image/jpg"]; + + const upload = (e)=>{ + e.preventDefault(); + setUpStyle({display:"none"}); + setProgStyle({display:"block"}); + + var docRef = projectfirestore.collection('users').doc(auth.X); + docRef.get().then((doc)=>{ + if(doc.exists){ + var storageRef = firebaseApp.storage().ref(); + const uploadRef = projectfirestore.collection('upload'); + var mountainImagesRef = storageRef.child(`images/${auth.X}${doc.data().totalupload}`); + mountainImagesRef .put(file).on('state_changed', (snap) => { + let percentage = (snap.bytesTransferred / snap.totalBytes) * 100 + setProgress(percentage) + + }, + (err) => { + setError(err); + }, async () => { + const Url = await mountainImagesRef.getDownloadURL(); + const createdAt = timestamp(); + uploadRef.doc(auth.X+""+doc.data().totalupload).set({ + url: Url, + createdAt: createdAt, + name: file.name, + tag:tagImg + }) + var c = doc.data().totalupload; + projectfirestore.collection('users').doc(auth.X).update({ + totalupload: increments, + }) + projectfirestore.collection('users').doc(auth.X).collection('photos').doc("pic"+doc.data().totalupload).set({ + url:Url, + }) + setfirebaseUrl(Url) + }) + }else{ + console.log("doesn't exists") + } + }) + + + } + + + + + const onDrop = acceptedFiles => { + var selected = acceptedFiles[0]; + + if (selected && types.includes(selected.type)) + { + + setFile(selected); + setError(null); + setUrl(URL.createObjectURL(selected)); + } + else + { + setFile(null); + setError("please select a valid image file(png,jpeg)"); + } + } + const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop}) + + useEffect(() => () => { + // Make sure to revoke the data url to avoid memory leaks + URL.revokeObjectURL(url) + }, [file]); + + useEffect(()=>{ + if(progress === 100){ + setTimeout(()=>{ + setFile(null); + setModal(false); + },1000) + setTimeout(()=>{ + setUpStyle({display:"block"}); + setProgStyle({display:"none"}); + setProgress(0); + }, 2000) + } + + }, [progress]) + + useEffect(()=>{ + console.log(tagImg) + + }, [tagImg]) + + var flag = false; + + return ( +
+
+

Upload Your Walpapers

+
+ +
+ + { + (file === null)? + (isDragActive ? +

Drop the files here ...

: + (error?

{error}

: +

Drag 'n' drop some files here, or click to select files

)) : + (file && ) + } +
+
+ {(progress===100)?

Finished....

:

Uploading....

} +
+
+
+

Setup tags

+
+
+
+ {setSearch(e.target.value.toLowerCase())}} /> + { + tagImg && tagImg.map(tag =>( + { + var item = tagImg; + var index = item.indexOf(e.target.value); + var p1 = item.slice(0,(index)) + var p2 = item.slice((index+1),item.length) + setTagImg(p1.concat(p2)) + }} className={classes.selectedTags} /> + )) + } +
+
+ { + tags && tags.map(tag =>( + tag.startsWith(search)? + { + tagImg.includes(e.target.value)?setTagImg([...tagImg]):setTagImg([...tagImg, e.target.value]) + }} className={classes.availableTags} disabled={tagImg.length >= 5}/> : null + )) + } + { + tags && tags.map(tag =>( + tag.startsWith(search)?flag = true : null + )) + } + { + !flag? { + setTags([...tags, search]) + setTagImg([...tagImg, search]) + }} + /> : null + } +
+ +
+
+ + +
+ + +
+ + ) +} +export default Upload \ No newline at end of file