將圖像同時上傳到 firebase 存儲和文本輸入到 firestore 時出錯

我希望在提交表單時，選擇的文本輸入和文件應分別上傳到 firestore 集合和 firebase 存儲。我不明白為什麼它給我錯誤。

這是我的表格：

<form onSubmit={postSubmitHandler}>
    <input type="text" ref={postTextRef}/>
    <input type="file"/>
    <button type="submit">Upload</button>
</form>

這是我的處理程序函數：

function postSubmitHandler(e) {
    e.preventDefault();
    const file = e.target .files[0];

    console.log(file)

    if (!file) return;
    const sotrageRef = ref(storage, `posts/${file.name}`);
    const uploadTask = uploadBytesResumable(sotrageRef, file);

    uploadTask.on(
        "state_changed",
        (snapshot) => {
        const prog = Math.round(
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setProgress(prog);
        },
        (error) => console.log(error),
        () => {
        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
            console.log("File available at", downloadURL);
            firestore.collection('posts').doc(currentUser.uid).set({
                imageURL: downloadURL,
                caption: postTextRef.current.value,
                postedAt: new Date(),
                likes: 0
            })
        });
       }
    ); 
  }

我得到的錯誤是：

 TypeError: Cannot read properties of undefined (reading '0')
  47 | 
  48 |  function postSubmitHandler(e) {
  49 |    e.preventDefault();
> 50 |    const file = e.target.files[0];
  51 |  ^  

請幫我糾正這個錯誤，或者如果有其他好的方法，請告訴我。