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')
});
}
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;
}
})
(error) => {
switch (error.code) {
case "storage/unauthorized":
break;
case "storage/canceled":
break;
case "storage/unknown":
break;
}
},
() => {
getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
addDoc(collection(db, "posts"), {
imageUrl: URL,
username: "swizz6ix",
read: false,
profilePic: user.profilePic,
timestamp: serverTimestamp(),
})
navigate("/chats")
})
}, );
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(...)