DEV Community

loading...
Cover image for Free Cloud File Storage - Firebase Basics Series - Part 8

Free Cloud File Storage - Firebase Basics Series - Part 8

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

Buy Me A Coffee

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.
image

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');
Enter fullscreen mode Exit fullscreen mode

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]);
    }
  }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

After getting the library initialize firebase storage

const storage = firebase.storage();
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Uploading files in our project

firebase storage

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);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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:

areeburrub image

Buy Me A Coffee

Discussion (0)