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:
Top comments (0)