将IMG上传到firebase存储＆＃x2B;创建新的水桶

Question

自学成才的编码器。希望我能正确解释这一点。我正在尝试创建一个食谱网站，用户可以在其中使用图像上传自己的自定义食谱。用户提交表单，信息将上传到数据库集合“指南”。将文件上传到firebase存储如何将URL发送回反应，以便表单可以将URL记录到步骤数组中？

这是用户在上传组件中上传IMG以上载IMG上传的逻辑：

    const uploadFile = () => {
      const name = new Date().getTime() + file.name
      const storageRef = ref(storage, file.name)

      const uploadTask = uploadBytesResumable(storageRef, file);

uploadTask.on('state_changed', 
  (snapshot) => {
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    setPercentage(progress)
    switch (snapshot.state) {
      case 'paused':
        console.log('Upload is paused');
        break;
      case 'running':
        console.log('Upload is running');
        break;
        default: 
          break;
    }
  }, 
  (error) => {
    console.log(error)
  }, 
  () => {
    // Handle successful uploads on complete
    getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
      setData((prev) => ({...prev, img: downloadURL}))
    });
  }
);

    }
    file && uploadFile();
  }, [file]);

这是在上传组件中也可以上传/提交表单的逻辑。

  const handleAddGuide = async (e) => {
    e.preventDefault();
    const newId = uuidv4()

    await setDoc(doc(db, "guides", newId), {
      author: e.target.author.value,
      categoryId: "100",
      categoryName: e.target.categoryName.value,
      // coverImg: imgURL,
      id: newId,
      name: e.target.name.value,
      tags: e.target.tags.value,
      steps: [
        {
          step: e.target.step.value,
          img: file.url <---- I need this file to upload to a folder inside storage named dynamically after the name of the recipe ("e.target.name.value").
        }
      ]
    });
  };

这是我初始化DB和存储的地方：

firebase.js 

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore'
import { getAuth } from "firebase/auth";
import "firebase/storage"
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  <details> 
}

const app = initializeApp(firebaseConfig);
export const userAuth = getAuth()
export const db = getFirestore(app)
export const storage = getStorage(app);