Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Nurbek Ismailov
Nurbek Ismailov
2,068 Points

google Firebase Storage Javascript is not working, I am new to firebase can't make it work, I appreciate your input.

I did exactly like in official Firebase tutorial https://www.youtube.com/watch?v=SpxHVrpfGgU but it seem something is not working.

<html>
  <head>
    <meta charset="utf-8">
    <title>FB TEST</title>
    <style media="screen">
    body {
      display: flex;
      min-height: 100vh;
      padding: 0;
      margin:0;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    #uploader {
      -webkit-appearance:none;
      appearance:none;
      width: 50%;
      margin-bottom: 10px;
    }

    </style>
  </head>
  <body>

    <progress  value="0" max="100" id="uploader">50%</progress>
    <input  type="file" value="upload" id="fileButton">

<script src="https://www.gstatic.com/firebasejs/3.5.1/firebase.js"></script>
    <script>

      var config = {
        apiKey: "AIzaSyAfB4eGEQnQacfXMseXG7HEiy97VKXbTuo",
        authDomain: "pluginstreet.firebaseapp.com",
        databaseURL: "https://pluginstreet.firebaseio.com",
        storageBucket: "pluginstreet.appspot.com",
        messagingSenderId: "732877200711"
      };
      firebase.initializeApp(config);
      var uploader = document.getElementById('uploader');
      var fileButton = document.getElementById ('fileButton');

      fileButton.addEventListener('change', function (e){

        var file = e.target.files[0];

      var storageRef = firebase.storage().ref('sweet_gifs/'
      + file.name);

      var task = storageRef.put(file);

      task.on('state_changed',

          function progress(snapshot) {
          var percentage = (snapshot.bytesTransferred /
          snapshot.totalBytes) * 100;
          uploader.value = percentage;
      },

      function error(err) {

      },
      function complete () {
      }
      ),
      });

    </script>

  </body>
</html>
Nurbek Ismailov
Nurbek Ismailov
2,068 Points

Everything works, only progress bar section doesn't work, which is below

\\ task.on('state_changed',

      function progress(snapshot) {
      var percentage = (snapshot.bytesTransferred /
      snapshot.totalBytes) * 100;
      uploader.value = percentage;
  },

  function error(err) {

  },
  function complete () {
  }
  ),

\\

1 Answer

Rafael Hernandez
Rafael Hernandez
3,010 Points
Rafael Hernandez
Rafael Hernandez
3,010 Points

Sorry for the late response, hopefully this can help someone else looking for this issue in the future

  uploadTask.on('state_changed', function(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;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case firebase.storage.TaskState.PAUSED: // or 'paused'
        console.log('Upload is paused');
        break;
      case firebase.storage.TaskState.RUNNING: // or 'running'
        console.log('Upload is running');
        break;
    }
  }

source: https://firebase.google.com/docs/storage/web/upload-files