Free Cloud File Storage - Firebase Basics Series - Part 8

My previous post told you about firestore and how we will use it for our new project which will take users photo and create a post with it.

In this post we will be implementing the cloud file storage to store user photos and finally will host it on firebase hosting.

I will not be discussing how to add data to firestore or how user-auth is working check previous posts for that

Creating a post

We can add a POPUP where user can upload image and then can post it, the popup will have a file input, progress bar, preview display and submit button.

Getting files from user

Skip this part if you are familiar with files in javascript
Give id to the an input file element and also create a img element where preview will be show then get them in our javascript

const uploadPhoto = document.getElementById('photo-input');
const preview = document.getElementById('preview');

Now, we will add an onchange event which will change the preview image you can use this snippet in various projects.

uploadPhoto.onchange = () => {
    var input = upPhoto;
    var url = upPhoto.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
     {
        var reader = new FileReader();

        reader.onload = (e) => {
           preview.src = e.target.result;
        }
       reader.readAsDataURL(input.files[0]);
    }
  }

Uploading files to cloud storage

Adding firebase cloud storage script

like every other Library we have to add storage also you can get it from the docs firebas-docs

<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-storage.js"></script>

After getting the library initialize firebase storage

const storage = firebase.storage();

Location of files

To upload any file we have to first decide a location where it will be stored and here also it is called reference,

const fileRef = storage.ref('FolderName/NewFolder/'+image.png)

Uploading a file

once reference is set then we can put our files to that reference,

var file = uploadPhoto.files[0];
//get the first file from the input file dom

fileRef.put(file); //Upload

Uploading files in our project

On the upload button click We are uploading the file to the storage.

uploadBtn.onclick = () => {
    var file = upPhoto.files[0];
    const fileRef = storage.ref('posts/' +makeid(6)+'-'+file.name)
    fileRef.put(file);
}

To avoid same file name I am using makeid function to generate random id, I got this snippet 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;
}

What Next:

For Now we are able to upload files in next post we will see how we can get files from cloud storage and how to update the progress bar.

Follow me:

Areeb ur RubFollow

Arduino | Python | TypeScript | Next Js | Love learn making things