This is the code for uploading image on React app. Its showing on firebase storage but not added in to cloud firestore. and that's why I am not able to upload any image on React app manually. I've googled and searched so many times but cant fix this.

function  Imgupload({username}){

**strong text**    const [caption,setCaption]=useState('');
    const [image,setImage]=useState(null);
    //const [url,setUrl]= useState("");
    const [progress,setProgress]=useState(0);

    const handlechange = (e)=>{
       if(e.target.files[0]){
           setImage(e.target.files[0]);
       } 
    };

    const handleUpload = () =>{
      const uploadTask= storage.ref('images/$ {image.name}').put(image);
      
        uploadTask.on(
         "state_change",
         (snapshot) =>{
             //progress function..
         const progress=Math.round(
            (snapshot.bytesTransferred/snapshot.totalBytes) * 100
            );
            setProgress(progress);
         },
         (error) =>{            //error func..
            console.log(error);
             alert(error.message);
         },
         ()=>{ //complete func..
           storage
           .ref("images") 
           .child(image.name)
           .getDownloadURL()
           .then (url =>{
        //post img on db..
          db.collection("posts").add({
            timestamp:firebase.firestore.FieldValue.serverTimestamp(),
            caption  :caption,
            imgurl   :url,
            username :username   
        });
           setProgress(0);
            setCaption("");
            setImage(null);
           });
         }
      );
    }

This is the Error from console:

localhost/:1 Uncaught (in promise) FirebaseError: Firebase Storage: Object 'images/Screenshot (202).png' does not exist. (storage/object-not-found)
{
  "error": {
    "code": 404,
    "message": "Not Found."`enter code here`
  }
}

Can't fix this problem. please help.

CodePudding user response：

You have an extra space in the file name here:

const uploadTask= storage.ref('images/$ {image.name}').put(image);
                                    //