How to save uploaded file url in firebase using react

Question

I am new to React Redux firebase. I want to upload the file and save the url in database. I'm able to save the file to storage, but cannot save the url.

Any answer will be appreciated!

on button click I have the following code.

handleSubmit = (e) => {
    e.preventDefault();
    const { sp_License } = this.state;
    const Lfilename = this.state.sp_name + '_' + new Date().getTime();
    const uploadTask = storage.ref('License/' + Lfilename).put(sp_License);
    uploadTask.on('state_changed',
        (snapshot) => {
            //progress 

        },
        (error) => {
            //error

        },
        () => {
            uploadTask.snapshot.ref.getDownloadURL().then(
                url => this.setState({ License: url })

            );
            console.log(this.state);
            this.props.createDroneSP(this.state)
        });

}

Answer 1

Instead of using the on() method which sets a listener, you should use the then() method which "behaves like a Promise, and resolves with its snapshot data when the upload completes".

Therefore you should modify your code as follows:

handleSubmit = (e) => {
    e.preventDefault();
    const { sp_License } = this.state;
    const Lfilename = this.state.sp_name + '_' + new Date().getTime();
    const uploadTask = storage.ref('License/' + Lfilename).put(sp_License);
    uploadTask
    .then(uploadTaskSnapshot => {
        return uploadTaskSnapshot.ref.getDownloadURL();
    })
    .then(url  => {
        this.setState({ License: url });
        console.log(this.state);
        this.props.createDroneSP(this.state)
    });    

}