How to get resized image downloadedURL from Firebase Storage

Question

Context

I am passing an image from a file input an then uploading that image to firebase. I am using the all the default settings on the firebase resize image extension so the images are resizing to 200x200 and there's no file path or folder.

Problem

I have seen a few post similar to this question but there are not any good answers on how to get the downloadURL once you resize the image. Can you please explain how I would do this in this circumstances?

Thanks so much!

    sendImageToFirebase(image, userId) {
            const imageName = image.name;
            const extension = image.type.split('/')[1].trim();
            const imageSize = image.size;
            const metadata = { contentType: image.type, name: imageName, size: imageSize };

            const storageRef = storage.ref(`posts/${userId}/${imageName}.${extension}`);
            const uploadTask = storageRef.put(image, metadata);

            uploadTask.on('state_changed', (snapshot) => {
                    // Snapshot data ...
                }, (error) => {
                    // Error Handling ...
                },  () => {
                    uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                        this.photoUrl = downloadURL;
                    });
                },
            );
        },

Can you pls share the way you configured the extension? There is one possibility with a Cloud Function that would saved the downloadURL to a Firestroe document. — Renaud Tarnec, Jan 02 '21 at 17:32

score 0 · Answer 1 · answered Jan 10 '21 at 14:41

Just to clarify -- you already have the downloadURL - this.photoUrl (that I notice that you never declared).

I'm assuming that your data() has photoUrl: null in it. Then you can just {{ photoUrl }} in your template to see the actual address or

<div v-if="photoUrl">
<img :src="photoUrl" />
</div

to show the uploaded image.

Personally, I then created a second method to upload that to my FirestoreDB, so I could include

uploadToDB(this.photoUrl) in your function and then call

uploadToDB(url){
         db.collection("images")
        .add({
           url }),
        })
        .then(() => {
          this.message = "Successful Image URL Upload to FirestoreDB"
        });
    }
  },

How to get resized image downloadedURL from Firebase Storage

1 Answers1