Cloud Storage - Managing files user uploads - Firebase Basic Series - Part 9
Tags: firebase, tutorial, coding
Published: 2021-06-21 18:30:09

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

![firebase storage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fyxuvlky1jbln76chd6.gif)

In Previous post we successfully uploaded the user files to our cloud storage, but we haven't worked on what will happen after the file is uploaded.

### Uploading Snapshot
Like every other firebase service we have used by now cloud storage also have snapshots, we can use it to check How much data is uploaded and also trigger some function as it completes.

> If you don't know what are snapshots then no problems, it's just 
a fancy term to given to changes that occur in firebase. 
Read previous posts.

### Subscribing to snapshot
To start getting snapshots first change the `fileRef.put()` into a variable.
```javascript
var task = fileRef.put(file);
```
After changing it to a variable subscribe to the on snapshot it will give us the changes as file uploads. 
```javascript
    uploadTask.on('state_changed', 
        (snapshot) => {
            // Handle upload Progress 
        }, 

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

        () => {
            //Handle complete upload
        }
    );
```
Use the same order to create function,
- progress
- error 
- complete

### getting a progress bar
![firebase upload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcpc43wg7or0y243z4r6.gif)
 
We can get how much file is uploaded by simply using  `(snapshot.bytesTransferred / snapshot.totalBytes) * 100` this will give us the percentage of data transferred then we can easily  change the style of progress bar.
```javascrpt
(snapshot) => {
    // Observe state change events such as progress, pause, and resume
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    const upProgress = document.getElementById('upProgress');
    upProgress.style.width = progress + '%';
}
```

### Getting the file link 
In order to display the file we should have a link using which we can access files we can get that link in the `complete` part of function.
```javascript
() => {
        // Handle successful uploads on complete
        task.snapshot.ref.getDownloadURL().then((downloadURL) => {
            console.log('File available at', downloadURL);
        });
        }
```

<hr>
### What Next:
In the next post we will see how to store these file data in the firestore database and display it on the main feed

> {% 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>