Untitled

 useEffect(() => {
    const uploadImg = () => {
            const name = new Date().getTime() + file.name;  
            const storageRef = ref(storage, file.name);
            const uploadTask = uploadBytesResumable(storageRef, file);
                uploadTask.on('state_changed', 
                (snapshot) => {
                    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                    console.log('Upload is ' + progress + '% done');
                    switch (snapshot.state) {
                    case 'paused':
                        console.log('Upload is paused');
                        break;
                    case 'running':
                        console.log('Upload is running');
                        break;
                        default:
                        break;
                    }
                }, 
                (error) => {
                    console.log(error.message)
                }, 
                () => {
                    getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
                    console.log('File available at', downloadURL); // <--- downloadURL goes below line 42.
                    });
                }
                );  
        }
      file && uploadImg();
    }, [file])


  const handleAdd = async(e) => {
        e.preventDefault()
        try {
            if (!!user?.uid) {
                const docRef = await addDoc(collection(db, "users", `${user.uid}`, "contacts"), {
                    name: "",
                    notes: "",
                    img: url, // <--- downloadURL comes here.
                    timestamp: serverTimestamp(),
                    contactCards: {}
                });
                console.log("Document written with ID: ", docRef.id);
                }
            } catch (error) {
                console.log(error.message)
        } 
  }