How to get the resized downloadUrl after upload with firebase storage (Web SDK + Resize images extention)

Question

With the Firebase Web SDK, I can easily get the downloadUrl after upload a file

const task = firebase.ref().child('myFolder').put(file, metadata)
task.then(snapshot => {
 snapshot.ref.getDownloadURL()) 
}

But I installed the Resize Images Extention and now, I want to get the resized downloadUrl as soon as it is available. How to do that ? I do not find any explanations about it...

Answer 1

The extension deterministicly determines the new file name based on how you configured it. You can see the exact code for how the name is determined in the extension's source code.

When you installed the extension, it asked for a path to the resized images which is relative to the path of the original. That is the path to the new image (relative, of course, to the original).

Beyond that, the documentation states that it will be suffixed with the configured width and height.

Names the resized image using the same name as the original uploaded image, but suffixed with your specified width and height.

So, if you didn't specify a path, and you specified 200x200, and then uploaded image.jpg to root of the bucket, the new name would be: image_200x200.jpg, at the root of the bucket.

If you specified the path resized, and you specified 200x200, and the uploaded image2.jpg to the root of the bucket, the new name would be /resized/image2_200x200.jpg in the same bucket as the source image.

To get the download URL, you will need to call getDownloadURL on a storage reference with the new name once the extension function has created the new file.

If you want to wait, you can poll with code similar to the following:

function delay(t, v) {
  return new Promise(function(resolve) { 
    setTimeout(resolve.bind(null, v), t)
  });
}

function keepTrying(triesRemaining, storageRef) {
  if (triesRemaining < 0) {
    return Promise.reject('out of tries');
  }

  return storageRef.getDownloadURL().then((url) => {
    return url;
  }).catch((error) => {
    switch (error.code) {
      case 'storage/object-not-found':
        return delay(2000).then(() => {
          return keepTrying(triesRemaining - 1, storageRef)
        });
      default:
        console.log(error);
        return Promise.reject(error);
    }
  })
}

And this is how you would call it after the upload:

const storageRef = firebase.storage().ref().child('image_200x200.jpg');
keepTrying(10, storageRef).then((url) => console.log(url));