Как загрузить изображение в Firebase Storage и загрузить URL в Firestore одновременно в React. js? - PullRequest
Новая
       17

Как загрузить изображение в Firebase Storage и загрузить URL в Firestore одновременно в React. js?

0 голосов
/ 14 апреля 2020

Я новичок в React. js, я пытаюсь загрузить изображение в Firebase Storage, и после успешной загрузки я пытаюсь одновременно загрузить sh downloadURL в Firestore. Как это сделать? Вот код, в котором загрузка изображений работает нормально, но не работает firestore. 

    import React, {useState, Component} from 'react';
    import firebase from "../firebase";

    const storage = firebase.storage();

    class ImageUpload extends Component {
      constructor(props) {
        super(props);
        this.state = {
          image: null,
          url: '',
          progress: 0
        }
        this.handleChange = this
          .handleChange
          .bind(this);
          this.handleUpload = this.handleUpload.bind(this);
      }
      handleChange = e => {
        if (e.target.files[0]) {
          const image = e.target.files[0];
          this.setState(() => ({image}));
        }
      }
      handleUpload = () => {
          const {image} = this.state;
          const uploadTask = storage.ref(`images/${image.name}`).put(image);
          uploadTask.on('state_changed',
          (snapshot) => {
            // progrss function ....
            const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
            this.setState({progress});
          },
          (error) => {
               // error function ....
            console.log(error);
          },
        () => {
            // complete function ....
            storage.ref('images').child(image.name).getDownloadURL().then(url => {
                console.log(url);
                this.setState({url});

// ********************** **** эта часть не работает (НАЧАТЬ) *********************************

                const [imgURL, setImgURL] = useState('')

                firebase
                .firestore()
                .collection('notes')
                .add({
                  imgURL
                })
                .then(() => {
                  setImgURL('')
                })

// ****************************** эта часть не работает (КОНЕЦ) ****** **************************

            })
        });
      }
      render() {

        return (
          <div>
          <progress value={this.state.progress} max="100"/>
          <br/>
            <input type="file" onChange={this.handleChange}/>
            <button onClick={this.handleUpload}>Upload</button>
            <br/>

            <img src={this.state.url || 'http://via.placeholder.com/400x300'} alt="Uploaded images" height="300" width="400"/>
          </div>
        )
      }
    }
    export default ImageUpload;

1 Ответ

0 голосов
/ 15 апреля 2020

Чтобы записать URL загрузки в базу данных, вам не нужно хранить ее в состоянии. Вы можете просто записать его в базу данных прямо в обработчике then: 

storage.ref('images').child(image.name).getDownloadURL().then(url => {
    firebase
    .firestore()
    .collection('notes')
    .add({
      imgURL: url
    })
    .then(() => {
      setImgURL('')
    })
});
...