I can't upload an image to firebase, i keep getting an error (task.on is not a funtion),

Question

1. Upload was successful in the console.

const sendPost = () => {
  const id = uuid();
  const storage = getStorage();
  const storageRef = ref(storage, `posts/${id}`)
  const uploadTask = uploadString(storageRef, cameraImage, "data_url").then((snapshot) => {
    console.log('Uploaded a data_url string')
  });
}

2. uploadTask.on is not a function (console error). I am trying to monitor the progress of the upload

uploadTask.on('state_changed', (snapshot) => {
  const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log("Upload is" + progress + "% done");
  switch (snapshot.state) {
    case "paused":
      console.log("upload is runnig")
      break;
  }
})

3. trying to logout errors, if any

(error) => {
  switch (error.code) {
    case "storage/unauthorized":
      break;

    case "storage/canceled":
      break;

    case "storage/unknown":
      break;
  }
},

4. Trying to get the uploaded file URL and post it as a doc to firebase db

() => {
  getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
    addDoc(collection(db, "posts"), {
      imageUrl: URL,
      username: "swizz6ix",
      read: false,
      profilePic: user.profilePic,
      timestamp: serverTimestamp(),
    })
    navigate("/chats")
  })
}, );

Answer 1

When you use uploadString(), the upload is not resumable. If you want to track upload progress then you'll have to use uploadBytesResumable() that takes a Blob | Uint8Array | ArrayBuffer as parameter and not a base64 string. So first you'll have to convert the base64 string into a Blob.

Checkout: How to convert Base64 String to javascript file object like as from file input form?

const fileToUpload = parseFileFromBase64();

const task = uploadBytesResumable(storageRef, fileToUpload)

task.on(...)