title: how can i make a progress bar when i upload a image to my firebase storage?
body: <p>i want to make a progress to show the user how much of a file is uploaded so he wont exit n middle of uploading can anyone help me with how can i make a progress bar in vue js</p>
  
  <p>i'm using this firebase code to show the percentage i have used v-model and p tags to show the percentage but nothing works</p>
  
  <p>methods:{</p>
  
  <pre><code>uploadfiles(e) {
    var storage = firebase.storage();
    var user = firebase.auth().currentUser;
    var file = e.target.files[0];
    var path = "users/" + user.uid + "/attachments/" + Date.now() + ".jpg";
    var storageRef = storage.ref(path);
    var task = storageRef.put(file);
        task.on('state_changed');
      function progress (self, snapshot){
        var percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
          console.log('this is image =',percentage);
            self.progress = percentage;
             console.log(progress);
      }
  
      task.then(snapshot =&gt; {
        console.log("image uploaded successfully");
        //saveMessageInDatabase(newmessagedata);
        return task.snapshot.ref.getDownloadURL();
      })
      .then(url =&gt; {
        console.log("download url of image", url);
        this.username.image = url;
        console.log(this.username.image);
      })
      .catch(error =&gt; {
        // hideMessageDialog();
        console.log("image uploaded error");
      });
  }
  </code></pre>
  
  <p>}
  HTML</p>
  
  <pre><code>  &lt;p&gt;{{this.progress}}%&lt;/p&gt;
  
     &lt;progress max="100"  :style="{width: progress+'%'}" value="0"&gt; 
   &lt;/progress&gt; 
  
  &lt;div class="progress-bar" role="progressbar" v-bind:aria-valuenow="this.progress" aria-valuemin="0" aria-valuemax="100" :style="{width: this.progress+'%'}"&gt;&lt;/div&gt;
  
      &lt;input id="pic" type="file"  @change="uploadfiles"&gt;
  </code></pre>