The problem is all my Collections Documents are referring to the same blob file because each upload replaces the existing Storage blob.
I think I need to assign a Name to the Blob to store a New Entry each time an upload happens.
Trying to assign Name with Math.random() however has not worked. Suggestions?
import { useParams, useHistory } from "react-router-dom";
const { productID } = useParams();
async function handleSubmitUpload() {
if (recordedChunks.length) {
const promises = [];
const blob = new Blob(recordedChunks, {Name: Math.random()}, {type: "video/webm"});
const reviewRef = await storage().ref(`prodReviews/${blob.Name}`)
const uploadTask = await storage().ref(`prodReviews/${blob.Name}`).put(blob);
await promises.push(uploadTask);
const videoUrl = await reviewRef.getDownloadURL();
const timestamp = new Date();
await firestore
.collection("products")
.doc(productID)
.collection("productReviewClips")
.add({videoUrl, userID: auth.currentUser.uid, createdDate: timestamp })
history.push(`/product/${productID}`);
setRecordedChunks([]);
}
}
The Blob() constructor seems to take only 2 parameters but you are passing 3. You can use either Firestore SDK or UUID to generate random IDs and use them as file names as shown below:
const blob = new Blob(recordedChunks, {type: "video/webm"});
// Get a random ID
const randomId = firestore.collection("test").doc().id
// Upload to Firebase Storage
const reviewRef = await storage().ref(`prodReviews/${randomId}`)