Firebase Storage Cannot read property split of undefined

Question

The other posts regarding this error are extremely scattered, and most are not for my use case of Firebase Storage.

This current handleSubmit function for a multi field form with an image uploader:

Stores (put) the photo into Storage successfully and creates a link

However the 2nd storage function: storage().ref("prodimages").child(productThumbnail.name).getDownloadURL() .then((url) => {

is unable to go through with its process of getting the downloadURL so that it can be assigned to another React Hook to then be processed by a redux function.

We'd appreciate any thoughts.

const handleSubmit = (e) => {
        e.preventDefault();
        storage()
        .ref(`prodimages/${preproductThumbnail.name}`)
            .put(preproductThumbnail)
            .then(
            () => {
            storage().ref("prodimages").child(productThumbnail.name).getDownloadURL()
            .then((url) => { 
                setProductThumbnail(url);
                dispatch(
                    addProductStart({
                        productCategory,
                        productName,
                        productThumbnail,
                        productPrice,
                        productDesc,
                    })
                    )
                });
            },
            resetForm()
            )}

Jed Lancer Jed Lancer · Accepted Answer · 2021-08-10T17:53:13

All I needed to do was change .child(productThumbnail.name) to preproductThumbnail.name)

This is just a lesson in ensuring you have your hooks all in the right place.

I could've broken down this problem into:

Are all the hooks involved with this function in the right place? Check
Are the components involved with Firebase correct? Check
Is the problem isolated to this function? Check

Firebase Storage Cannot read property split of undefined

1 Answers