CODEWITHSUNDEEP
javascriptreactjsfirebasegoogle-cloud-firestorefirebase-storage
Mars2024
Mars2024

Reputation: 394

Storing a Video blob in Firebase with custom Name attribute, returns Undefined

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([]);
        }
    }

Upvotes: 1

Views: 833

Answers (1)

Dharmaraj
Dharmaraj

Reputation: 50850

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}`)

Upvotes: 1

Related Questions