DEV Community

loading...
Cover image for Display cloud file on website - Firebase Basics Series - Part 10

Display cloud file on website - Firebase Basics Series - Part 10

Areeb ur Rub
18 | coding since 2016 | Arduino | Python | JavaScript | HTML/CSS | Love learn making things
・3 min read

Buy Me A Coffee

Sorry about posting this one late I was working on this and drafted it for a while and thinking to post this one everyday and finally did it today.
Sorry for my procrastinating issues.

In the last post we were able to check whether our file is uploaded or not and also checked the upload process using a progress bar.

Now, when the file is uploaded after that we will create a entry in firestore database then we will be able to display the uploaded content on the website.

Adding data to firestore

In order order to get the files first we need to store details about the file and we will be using firestore database to store the file data.

The Data we will be saving for our Photogram Project will be

  • Uploaded By (Name and UID)
  • user id (uid)
  • heading for the post
  • Post Id
  • Upload Time
  • File Download Link

We have to update the database whenever new file is uploaded so we will create a function which take the download link and username then add the data to firestore.

We will call the function from the complete


    uploadTask.on('state_changed', 
        (snapshot) => {
            // Handle upload Progress 
        }, 

        (error) => {
            // Handle unsuccessful upload
        }, 

        () => {
            //Handle complete upload
            task.snapshot.ref.getDownloadURL().then((downloadURL) => {
            updateDatabase(downloadURL, firebase.auth().currentUser);
        });
        }
    );

Enter fullscreen mode Exit fullscreen mode

And the update function will simply add the data to the database,

// Update Database Function
const db = firebase.firestore();
const dbRef = db.collection('posts');
const updateDatabase = (link,user) => {
 let post = {
     postid : makeid(7),
     heading:headingPhoto.value,
     By : user.displayName,
     uid : user.uid,
     img : link,
     time : firebase.firestore.FieldValue.serverTimestamp()
 }
 dbRef.add(post)
}

Enter fullscreen mode Exit fullscreen mode

I use a snippet to generate random code which i got from here

const makeid = (length) => {
    var result           = '';
    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * 
 charactersLength));
   }
   return result;
}
Enter fullscreen mode Exit fullscreen mode

Displaying data

There will be two page which will be displayed one in which all feeds will be visible and another in which only the posts in current user profile will be shown.

For that we will be using the .where query to get data in all feed we will display all posts and in user profile we will change it to .where('uid','==',user.uid)

By default we will subscribe to the all photos snapshots but if user select Profile we will unsubscribe to all and subscribe to the profile one so that if user uploads something, it's visible on the page.


var allfeedStatus = false;
var userfeedStatus = false;

// sub all will subscribe to all feed
subAll = () => {

    if(allfeedStatus == false){
        allfeed = dbRef.onSnapshot((querySnapshot) => {
            photoContainer.innerHTML = ''
            querySnapshot.forEach((doc) => {
                drawPhotos(doc.data().img,doc.data().By,doc.data().heading);
            });
        });
        allfeedStatus = true;
        userSection.hidden = true;
    }

    if(userfeedStatus){
        userfeed();
        userfeedStatus = false;
    }

}


// sub profile will subscribe to the profile feed
subProfile = () => {
    if(userfeedStatus == false){
        userfeed = dbRef.where('uid','==',auth.currentUser.uid).onSnapshot((querySnapshot) => {
            photoContainer.innerHTML = ''
            querySnapshot.forEach((doc) => {
                drawPhotos(doc.data().img,doc.data().By,doc.data().heading);
            });
        }); 
        userSection.hidden = false;
        userfeedStatus = true;
    }

    if(allfeedStatus == true){
        allfeed();
        allfeedStatus = false;
    }
}

subAll();

Enter fullscreen mode Exit fullscreen mode

Also create a function draw post which will add the posts to the page.

Let's Test

The website is working and is hosted on firebase hosting check it on the link : photogram-on.web.app

Get the codes from my github repo : Photogram Github Repo


Follow me for more

areeburrub image

Buy Me A Coffee

Discussion (0)