When I upload a image firebase storage getdownloadUrl() put download url In Firestore Collections but not set it in React JS

Question

I am trying to upload an Image to Firebase Storage and after successful upload I am trying to insert image downloadURL to Firestore collection at the same time.

How to do it? Here is the code in which Uploading Image is working fine but firestore is not working.

dbRef = firebase.firestore().collection('stack_overflow').doc()

constructor(props) {
super(props);

this.state = {
    question_id: this.dbRef.id,
    question_title: '',
    question_image: null,
    question_image_url: '',
};
}

dataOnChange = (e) => {
    const state = this.state
    state[e.target.name] = e.target.value
    this.setState(state)
}

handleImageOnChange = e => {
    if (e.target.files[0]) {
        const question_image = e.target.files[0]

        this.setState(() => ({question_image}))
    }
}
 
onSubmitData = (e) => {
    e.preventDefault()

    const {
        question_id, question_title, question_image, question_image_url
    } = this.state;

    /*image upload and download*/
    const uploadImage = storage.ref(`/stack_gallery/${cat_image.name}`).put(cat_image);

    uploadImage.on('state_changed', (snapshot) => {
            console.log("Image Upload Progress")
        },
        (error) => {
            console.log(error);
        },
        /*() => {
            storage.ref('quote_gallery').child(question_image.name).getDownloadURL().then(question_image_url => {
                console.log(question_image_url);
                this.setState({question_image_url});
            })
        }*/);

    storage.ref('stack_gallery').child(question_image.name).getDownloadURL().then(question_image_url => {
        console.log(question_image_url);
        this.setState({question_image_url});
    })
    this.dbRef.set({
        question_id, question_title, question_image_url
    }).then((docRef) => {
        this.add({
            question_id: '',
            question_title: '',
            question_image_url: this.state.cat_image_url
        })
        
    }).catch((error) => {
        console.error("Error Adding Document: ", error)
    })
}

Please check my code where is problem and how to solve this problem.

Answer 1

As I see your code you saved question_image_url to this.state, and I think we dont have to save it to state as we use state to render JSX. Once you got url in callback then why don't you run saving to firestore in callback? And you used firestore().collection().doc().set, this works wrong. you should indicate the doc_id to set because set is updating function of current doc_id. If you want to add new doc then you can use add function from collection that wrapps whole docs.

uploadImage.on('state_changed', (snapshot) => {
            console.log("Image Upload Progress")
        },
        (error) => {
            console.log(error);
        },
        function() {
          uploadImage.snapshot.ref.getDownloadURL().then(function(downloadURL) {
          firebase.firestore().collection('stack_overflow').add({
            question_title: question_title,
            question_image: question_image,
            question_image_url: downloadURL
          })
          .then((res) => {
            let id = res.id;   //receive id of doc added
  firebase.firestore().collection('stack_overflow').doc(id).set({question_id:id},{merge:true})
        })
        });