Unable to upload file to Firebase. No errors and no files in the storage-CodePudding

In the console I can see Uploaded a blob or file! but in the database I don't have any images. I expected the image to be uploaded but it won't show in the Firestore database.

Here is my input where I try to upload a file:

<input type="file" name="bookImage" id="bookImage">

Event handling and file uploading:

import { getFirestore, doc, setDoc } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js";
import { getStorage, ref, uploadBytesResumable, getDownloadURL, uploadBytes } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-storage.js"

document.getElementById("bookImage").addEventListener("change", function uploadImage(e) {
    try {
        const fileName = e.target.files[0];
        const storageRef = ref(storage, "image/");
       
        uploadBytes(storageRef, e.target.files).then((snapshot) => {
            alert("upload Byte IS Work");
            console.log('Uploaded a blob or file!');
        });
    } catch (error) {
        console.log(error)
        alert(error);
    }
})

CodePudding user response：

You can only upload a single file at a time. Instead of e.target.files use e.target.files[0] inorder to access a single file.

uploadBytes(storageRef, e.target.files[0]).then((snapshot) => {
            alert("upload Byte IS Work");
            console.log('Uploaded a blob or file!');
        });

Also, to access the name of the file use e.target.files[0].name