What is Firebase?
Firebase is a platform which allows you to build web and mobile applications without server side programming language. It stores users data on its real-time database which sync data among the users in real-time. It is a google product and offers us a variety of features. Some key features of Firebase are:
- Firebase hosting
- Real time database
- Firebase analytics
- Cloud messaging
- Firebase storage
- Notifications etc.
All these features is what makes firebase a good tool, though most widely used feature of firebase is definitely the real-time database it offers. The Firebase real-time database is basically a cloud-hosted NoSQL database that lets you store and sync between your users in real-time. The database is just one big JSON object that the developers can manage in real time. Real time syncing makes it easy for users to access their data from any device, be it web or mobile.
Get Image URL
Firebase can be used for various purposes but mostly used for the real-time database, online processing. Firebase cloud storage is the most used feature used by developers. Cloud Storage allows developers to quickly and easily upload files to a Google Cloud Storage bucket provided and managed by Firebase.
Image URL is obtained by uploading an image to firebase bucket and then that can return back a URL that URL is a permanent URL which can be open anywhere. Then a user can use this URL for any purpose in its application.
Generate a Bucket in firebase and then create a folder “images” (or any folder name) and then access the configuration file from firebase this file generate when you generate database bucket.
Configuration code is like the code shown below:
var config = {
apiKey: "YOUR KEY",
authDomain: "YOUR DOMAIN",
databaseURL: "DATA BASE URL",
projectId: "postweb-b3f18",
storageBucket: "BUCKET",
messagingSenderId: "157746640407"
};
Add below script tag before adding above config code
javascript
<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script> |
Initialize your FireBase cloud storage
firebase.initializeApp(config);
Add some HTML to your html code so we can upload file
javascript
<form><progress value="0" id="uploader" max="100">0%</progress><br><br>// get the file from user<input id="photo"class="file"type="file" name="mainimage" value="" onchange="getfile()"><br><br>// submit the chosen file<button id="submit_link"type="submit" name="button">Save</button></form> |
Explanation: The above code is simply a html form which can take input from user that is user can select a file which he wants to upload and click on save button. When user choose file ‘getfile()’ function calls and below shown ‘getfile()’ function in javascript file can run. Then further call processing can be done in javascript code and returning back url of image. Adding javascript so that defined function in html can work:
javascript
<script type="text/javascript"> var selectedFile; function getfile() { var pic = document.getElementById("photo"); // selected file is that file which user chosen by html form selectedFile = pic.files[0]; // make save button disabled for few seconds that has id='submit_link' document.getElementById('submit_link').setAttribute('disabled', 'true'); myfunction(); // call below written function } function myfunction() { // select unique name for everytime when image uploaded // Date.now() is function that give current timestamp var name="123"+Date.now(); // make ref to your firebase storage and select images folder var storageRef = firebase.storage().ref('/images/'+ name); // put file to firebase var uploadTask = storageRef.put(selectedFile); // all working for progress bar that in html // to indicate image uploading... report uploadTask.on('state_changed', function(snapshot){ var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; var uploader = document.getElementById('uploader'); uploader.value=progress; switch (snapshot.state) { case firebase.storage.TaskState.PAUSED: console.log('Upload is paused'); break; case firebase.storage.TaskState.RUNNING: console.log('Upload is running'); break; } }, function(error) {console.log(error); }, function() { // get the uploaded image url back uploadTask.snapshot.ref.getDownloadURL().then( function(downloadURL) { // You get your url from here console.log('File available at', downloadURL); // print the image url console.log(downloadURL); document.getElementById('submit_link').removeAttribute('disabled'); }); }); }; </script> |
Explanation: When user submit the html form then getfile() function is called. This function simply take the file chosen by html form and make save button disabled for few seconds until file is uploaded to firebase and then further call another function that is ‘myfunction()’. ‘myfunction()’ can contain all firebase related entity ‘name’ in ‘myfunction’ is name with which name image is stored in database. And then some code to run progress bar and storageRef and other entity that all are firebase associated and storageRef.put(selectedFile) put selected file in database. Then uploadTask.snapshot.ref.getDownloadURL() gives us URL back and save button in html form again unable to upload another image. The file is uploaded to firebase and then returns back an URL which takes 2-3 seconds so that’s why i can use progress bar and make submit button disabled for sometime. When file uploaded and URL generated then only Submit button can be enabled.
