Я новичок в React.js, я пытаюсь загрузить изображение в хранилище Firebase, и после успешной загрузки я пытаюсь одновременно нажать 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
Jamshaid Alam 14 Апр 2020 в 22:23

2 ответа

Лучший ответ

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

storage.ref('images').child(image.name).getDownloadURL().then(url => {
    firebase
    .firestore()
    .collection('notes')
    .add({
      imgURL: url
    })
    .then(() => {
      setImgURL('')
    })
});
4
Frank van Puffelen 14 Апр 2020 в 21:17

config.js

import firebase from 'firebase/app'
import "firebase/firestore";
import "firebase/storage";

const firebaseConfig = {
            apiKey: "XXXX",
            authDomain: "XXXXX.firebaseapp.com",
            databaseURL: "https://XXXX-app-web.firebaseio.com",
            projectId: "XXXX",
            storageBucket: "XXXX-app-web.appspot.com",
            messagingSenderId: "XXXXXX",
            appId: "1:XXX:web:XXXX",
            measurementId: "G-XXXX"
};
firebase.initializeApp(firebaseConfig);
export const firestore = firebase.firestore();
export const storageRef = firebase.storage();

export default firebase;

< Сильный > Button.js

import React from 'react';
import {firestore,storageRef} from './Config';
import Card from './Components/Card';
import {Fab, Grid} from '@material-ui/core';
import {Add} from '@material-ui/icons';

function guidGenerator() {
    const S4 = function () {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    };
    return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());

}

export default function MediaCard(props) {
const fileUpload = (e) => {
        const file = e.target.files[0];
        console.log("FileName", file)
        const uploadTask = storageRef.ref('All_Files/').child(file.name).put(file);

        uploadTask.on('state_changed',
            (snapshot) => {
                const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                console.log('Upload is ' + progress + '% done');
            },
            (error) => {
                // Handle unsuccessful uploads
                console.log("error:-", error)
            },
            () => {
                const uniId = guidGenerator().toString();
                // Handle successful uploads on complete
                // For instance, get the download URL: https://firebasestorage.googleapis.com/...
                uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                    console.log('File available at', downloadURL);
                    firestore.collection("All_Files").doc(uniId).set({
                        file_name: file.name.toString(),
                        id: uniId,
                        download_url: downloadURL.toString()
                    })
                        .then(() => {
                            console.log("Document successfully written!");
                        })
                        .catch((error) => {
                            console.error("Error writing document: ", error);
                        });
                });
            }
        );
  return (
    <>
           <div>
                <Fab
                    color="primary"
                    aria-label="add"
                    style={{position: "fixed", bottom: "30px", right: "50px"}}
                >
                    <input hidden className={classes.input} id="icon-button-file" onChange={fileUpload} type="file"/>
                    <label htmlFor="icon-button-file" style={{height: "24px"}}>
                        <Add/>
                    </label>
                </Fab>
            </div>
    </>
  );
}
0
Meet Bhavsar 21 Мар 2021 в 05:46