Skip to content
Related Articles

Related Articles

Improve Article

How to upload an image using HTML and JavaScript in firebase ?

  • Difficulty Level : Hard
  • Last Updated : 23 Jun, 2021
Geek Week

Firebase is a product of Google which helps developers to build, manage, and grow their apps easily. It helps developers to build their apps faster and in a more secure way. No programming is required on the firebase side which makes it easy to use its features more efficiently. It provides cloud storage. It uses NoSQL for the storage of data.

Here, We are going to learn How we can upload images using HTML and JavaScript in firebase. While working with the database we may require to upload an image file also.

Step By Step Implementation

Step 1: If you are new to firebase then please refer to this.

Activate Firebase Storage:



Click on the Storage button on the left and click on Get Started.

After that this box will pop up. Click on Next.

Then click on Done.

Step 2: Here we’re going to write the Html and JavaScript Code to connect Html Code with Firebase Database.

HTML






<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Colleting Data</title>
    <link rel="stylesheet"
          href=
          integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
          crossorigin="anonymous">
 
</head>
 
<body class="container"
      style="margin-top: 50px;
             width: 50% height:auto; ">
 
    <h2 class="text-primary"
        style="margin-left: 15px; margin-bottom: 10px">
              Hey There,Here we are going to upload
    </h2>
    <form class="container" id="contactForm">
        <div class="card">
            <div class="card-body">
 
                <div class="form-group"
                     style="margin-left: 15px;
                            margin-top: 10px;
                            display:none;>
    <label for=" exampleFormControlSelect1 ">Select Type</label>
    <select class="form-control " id="types ">
      <option>1</option>
    </select>
  </div>
 
<br>
    Document Upload:
    <br>
    <!-- click here to choose file -->
    <input type="file " name="files[] " id="files ">
    <!-- click here to upload file -->
    <input type="hidden "
           name="url "
           id="url ">   
           <button type="button " onclick="uploadimage() ">
               Upload Image
            </button>
           <br><br>
  </div>
</div>
 
<button type="submit "
        class="btn btn-primary "
        style="margin-left: 15px; margin-top: 10px; display:none; ">
                Submit
  </button>
 
</form>
</body>
</script>
<script src=
</script>
 
<link type="text/css " rel="stylesheet " href=
 
<script src=
</script>
 
<script>
  
 
  
 // adding firebase data
   var firebaseConfig = {
    apiKey: "*********************- ",
    authDomain: "-********************* ",
    databaseURL: "********************* ",
    projectId: "********************* ",
    storageBucket: "********************* ",
    messagingSenderId: "********************* ",
    appId: "********************* "
  };
  firebase.initializeApp(firebaseConfig);
  var messagesRef = firebase.database().ref('Checking');
  document.getElementById(
     'contactForm').addEventListener('submit', submitForm);
 //uploading file in storage
  function uploadimage(){
     var type = getInputVal('types');
  var storage = firebase.storage();
  var file=document.getElementById("files ").files[0];
  var storageref=storage.ref();
  var thisref=storageref.child(type).child(file.name).put(file);
  thisref.on('state_changed',function(snapshot) {
 
 
  }, function(error) {
  
 }, function() {
  // Uploaded completed successfully, now we can get the download URL
  thisref.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    //getting url of image
    document.getElementById("url ").value=downloadURL;
    alert('uploaded successfully');
    saveMessage(downloadURL);
   });
  });
 
  // Get values
  var url = getInputVal('url');
  // Save message
  // saveMessage(url);
}
function getInputVal(id){
    document.getElementById('contactForm').reset();
 
}
 
 
// Function to get get form values
function getInputVal(id){
  return document.getElementById(id).value;
}
 
// Save message to firebase database
function saveMessage(url){
  var newMessageRef = messagesRef.push();
  newMessageRef.set({
   imageurl:url,
  });
}
</script>
</html>

After you have written the code you can run it using the below command in the terminal

python manage.py runserver 

Here, We will see the following screen after running it on any web browser.

After we select an image using choose file button we can choose any file, and then we will click on upload Image button to upload the image in firebase

In the Real-time database, we can see the image is uploaded successfully.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :