CODEWITHSUNDEEP
javascriptfirebasefirebase-storage
RAHUL KUNDU
RAHUL KUNDU

Reputation: 881

Firebase Firestorage Upload Process Jump from 0 to 100

I am implementing a file upload using Angular and Firebase. When I am uploading an image I want to show a smooth transition from 0 to 100. But right now I am using firebase's builtin function and when the process starts it is showing 0 then suddenly jumping to 100.

var uploadTask = storageRef.child('images/rivers.jpg').put(file);

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

  this.selectedImageUrl = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;  //this.selectedImageUrl is my custom variable which I wan to show smooth Animation
  console.log('Upload is ' + this.selectedImageUrl + '% done');


}, function(error) {
  // Handle unsuccessful uploads
}, function() {

  uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log('File available at', downloadURL);
  });
});

Upvotes: 0

Views: 317

Answers (2)

ked
ked

Reputation: 2456

You are dividing snapshot.bytesTransferred / snapshot.totalBytes which evaluates to 0 and then multiplying it with 100 give u zero, instead multiply it with 100 first and then divide it by total size

use the following formula

this.selectedImageUrl = (snapshot.bytesTransferred *100) / snapshot.totalBytes;

Upvotes: 3

Doug Stevenson
Doug Stevenson

Reputation: 317352

The behavior you're observing can't be changed.

Internally, the SDK uses a large buffer to send the contents of the file, and the progress only updates after an entire buffer is sent. If you're sending a small file, it's very possible that a single buffer contains the entire file. There's nothing you can do to change the size of the internal buffers, so you'll have to accept the way that it works today.

Upvotes: 1

Related Questions