CODEWITHSUNDEEP
firebasereact-native
Shivam
Shivam

Reputation: 201

Upload a video to Firebase in ReactNative

how to upload a video to firebase through react native application? I have successfully implemented feature: upload and download image from Firebase cloud storage. However I want to upload video. Any guidance?

I am able to get URI of video. Following is the function I am using to upload Video to firebase.

uploadVideo(uri) {
      console.log("inside");

        const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri

        const videoRef = firebase.storage().ref('images').child(`${Student.FirstName}`).child('video_098')
        var metadata = {
          contentType: 'video/mp4'
        };
        var uploadTask = videoRef.put(uploadUri, metadata);

        // Listen for state changes, errors, and completion of the upload.
        uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
          function(snapshot) {
            // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
            var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log('Upload is ' + progress + '% done');
            switch (snapshot.state) {
              case firebase.storage.TaskState.PAUSED: // or 'paused'
                console.log('Upload is paused');
                break;
              case firebase.storage.TaskState.RUNNING: // or 'running'
                console.log('Upload is running');
                break;
            }
          }, function(error) {

          // A full list of error codes is available at
          // https://firebase.google.com/docs/storage/web/handle-errors
          switch (error.code) {
            case 'storage/unauthorized':
              // User doesn't have permission to access the object
              break;

            case 'storage/canceled':
              // User canceled the upload
              break;

            case 'storage/unknown':
              // Unknown error occurred, inspect error.serverResponse
              break;
          }
        }, function() {
          // Upload completed successfully, now we can get the download URL
          uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
            console.log('File available at', downloadURL);
          });
        });


  }

This gives me following error: 

YellowBox.js:67 Possible Unhandled Promise Rejection (id: 0):
FirebaseStorageError {
  "code_": "storage/invalid-argument",
  "message_": "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.",
  "name_": "FirebaseError",
  "serverResponse_": null,
}

Upvotes: 0

Views: 3418

Answers (2)

Bojan Gvozderac
Bojan Gvozderac

Reputation: 31

There's a hint in the error message what your problem here is - firebase storage is expecting a file or blob but you're giving it a string.

If you're using RN version > 0.54 you need to first fetch the blob using the URI and then put that, so something like this:

const fetchedVideo = await fetch(uploadUri);
const videoBlob = await response.blob();

videoRef.put(videoBlob)

Hope this helps

Upvotes: 2

Garrett Manley
Garrett Manley

Reputation: 337

Firebase cloud storage is the way to go if you want to store and retrieve files from Firebase.

https://firebase.google.com/docs/storage

Upvotes: 0

Related Questions