Free Cloud File Storage - Firebase Basics Series - Part 8
Tags: firebase, tutorial, coding
Published: 2021-06-19 18:28:01

<a href="https://www.buymeacoffee.com/areeburrub" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twv781sovkaft45cnmn7.png)

## 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
```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.
```javascript
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](https://firebase.google.com/docs/web/setup#expandable-8)
```html
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-storage.js"></script>
```
After getting the library initialize firebase storage
```javascript
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,
```javascript
const fileRef = storage.ref('FolderName/NewFolder/'+image.png)
```

### Uploading a file
once reference is set then we can  put our files to that reference,
```javascript
var file = uploadPhoto.files[0];
//get the first file from the input file dom

fileRef.put(file); //Upload
```
### Uploading files in our project

![firebase storage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fyxuvlky1jbln76chd6.gif)
 
On the upload button click We are uploading the file to the storage.

```javascript
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](https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript)

```javascript
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;
}
```
<hr>
## 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:
{% user areeburrub %}

<a href="https://www.buymeacoffee.com/areeburrub" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>