reactjs - 尝试将自定义元数据添加到 Firebase 存储和 Firestore

Question

我一直在尝试拼凑一个应用程序，该应用程序存储图像、图像标题和要在主页上显示的简短描述，并在单击图像时出现一个模式，其中包含图片的放大副本和名称/描述向右。我能够成功地将图像上传到 Firebase 存储，但我很难考虑如何添加自定义元数据，如果有人有任何见解，将不胜感激。

到目前为止，我将其作为我的 firebase 存储挂钩：

import { projectStorage, projectFirestore, timestamp } from '../firebase/config';

const useStorage = (file, pieceName, pieceDescription) => {
    const [progress, setProgress] = useState(0);
    const [error, setError] = useState(null);
    const [url, setUrl] = useState(null);


    useEffect(() => {
        // references
        const storageRef = projectStorage.ref(file.name);
        const collectionRef = projectFirestore.collection('images');
        const newMetadata = {
            Name: pieceName,
            contentDescription: pieceDescription
        }

        storageRef.put(file, newMetadata).on('state_changed', (snap) => {
            let percentage = (snap.bytesTransferred / snap.totalBytes) * 100;
            setProgress(percentage);
        }, (err) => {
            setError(err);
        }, async () => {
            const url = await storageRef.getDownloadURL();
            const createdAt = timestamp();
            collectionRef.add({ url, createdAt });
            setUrl(url);
        });
    }, [file, pieceName, pieceDescription]);

    return { progress, url, error };

我的上传组件如下所示：

import React, { useState } from 'react';
import ProgressBar from './progressBar';


const UploadForm = () => {

    const [file, setFile] = useState(null);
    const [pieceName, setPieceName] = useState(null);
    const [pieceDescription, setPieceDescription] = useState(null);
    const [error, setError] = useState(null);

    const types = ['image/png', 'image/jpeg']

    const changeHandler = (e) => {
        let selected = e.target.files[0];
        
        if (selected && types.includes(selected.type)) {
            setFile(selected);
            setPieceName(pieceName);
            setPieceDescription(pieceDescription);
            setError('');
        } else {
            setFile(null);
            setError('Please select an image file (png or jpeg)');
        }
    }

    return (
        <form>
            <form id="form" class="topBefore" name="upload">
                <input id="pieceName" type="text" placeholder="PIECE NAME"/>
                <textarea id="pieceDescription" name="message" type="text" placeholder="ABOUT PIECE"></textarea>
            <label id="upLoadButton">
                <input type="file" onChange={changeHandler}/>
                <span id="spanTest">UPLOAD</span>
            </label>
            </form>
            <div className="output">
                { error && <div className="error">{error}</div> }
                { file && <div> { file.name} </div>}
                { file && <ProgressBar file={file} setFile={setFile} />}
            </div>
        </form>
        )
    

}

export default UploadForm;

任何能让我朝着正确方向前进的技巧都会很棒。

标签： reactjsfirebasegoogle-cloud-firestorereact-hooksmetadata