javascript - How do i get download URL once upload is done on firebase storage - Stack Overflow

admin管理员组

文章数量:1410682

I want to get the download URL once image upload is finished and then the downloadURL is set to my newAds.picLink(object.property) , but in this code since upload is in progress

newAds.update({ picLink: downloadURL });

is called which throws an error since downloadURL is currently not available and under progress. I have resolved this by using setTimeOut to 8 sec which lets the image to upload pletely first and then downloadURL is recieved but that's not correct.

How can i create a correct callback that sets newAds.picLink = downloadURL once image is pletely uploaded?

 addSubmitted.addEventListener('click', e => {
 const newAds = _db.ref(userID).push();
 const newAd = {
 };

const ref = firebase.storage().ref();
const file = $('#exampleInputFile').get(0).files[0];
const name = (+new Date() + '-' + file.name);
const task = ref.child(name).put(file, {contentType: file.type});

function abc() {
    task.snapshot.ref.getDownloadURL().then((downloadURL) => {
        console.log('File available at', downloadURL);
        console.log(downloadURL);
        newAds.update({ picLink: downloadURL });
    });

    task.catch(error => {
        // Use to signal error if something goes wrong.
        console.log(`Failed to upload file and get link - ${error}`);
    });
}

setTimeout(abc,8000);

I want to get the download URL once image upload is finished and then the downloadURL is set to my newAds.picLink(object.property) , but in this code since upload is in progress

newAds.update({ picLink: downloadURL });

is called which throws an error since downloadURL is currently not available and under progress. I have resolved this by using setTimeOut to 8 sec which lets the image to upload pletely first and then downloadURL is recieved but that's not correct.

How can i create a correct callback that sets newAds.picLink = downloadURL once image is pletely uploaded?

 addSubmitted.addEventListener('click', e => {
 const newAds = _db.ref(userID).push();
 const newAd = {
 };

const ref = firebase.storage().ref();
const file = $('#exampleInputFile').get(0).files[0];
const name = (+new Date() + '-' + file.name);
const task = ref.child(name).put(file, {contentType: file.type});

function abc() {
    task.snapshot.ref.getDownloadURL().then((downloadURL) => {
        console.log('File available at', downloadURL);
        console.log(downloadURL);
        newAds.update({ picLink: downloadURL });
    });

    task.catch(error => {
        // Use to signal error if something goes wrong.
        console.log(`Failed to upload file and get link - ${error}`);
    });
}

setTimeout(abc,8000);

• javascript
• firebase
• firebase-storage

Share Follow edited Jul 22, 2018 at 14:03 Frank van Puffelen 601k8585 gold badges890890 silver badges860860 bronze badges asked Jul 22, 2018 at 9:13 Ghulam AhmedGhulam Ahmed 7911 silver badge88 bronze badges 2

• Where did you declare newAds? – Alex Ironside Commented Jul 22, 2018 at 9:20
• @AlexIronside code updated , this all runs once submit button is clicked – Ghulam Ahmed Commented Jul 22, 2018 at 9:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

From the Firebase documentation on uploading a file:

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

// Register three observers:
// 1. 'state_changed' observer, called any time the state changes
// 2. Error observer, called on failure
// 3. Completion observer, called on successful pletion
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;
  }
}, function(error) {
  // Handle unsuccessful uploads
}, function() {
  // Handle successful uploads on plete
  // For instance, get the download URL: https://firebasestorage.googleapis./...
  uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log('File available at', downloadURL);
  });
});

So this registers a state_changed observer. When the upload has pleted, this calls StorageReference.getDownloadURL() to get the download URL.

put() returns an UploadTask, which you can use like a normal promise, because it declares a then() method:

const task = ref.child(name).put(file, {contentType: file.type});
task.then(snapshot => {
    ref.getDownloadURL().then(...);
});

本文标签： javascriptHow do i get download URL once upload is done on firebase storageStack Overflow