How to upload videos to Firebase Storage for React App

Question

I am working on a react project pretty much like a social media app where users can upload images or videos. I am using firebase storage to store the image and videos.

I can able to accomplish image uploading by using react react-firebase-file-uploader package but as I am new to web development, I am struggling to find the solution for uploading videos for react.

I have searched the whole internet but I couldn't find a proper solution to accomplish these tasks.

1. I required to upload only video/videos and want to preview it/them before uploading data to firebase storage.

2. I need to compress the video to reduce the file size before uploading or after uploading to firebase storage using cloud functions.

Thank you very much for your help.

Answer 1

May be is worth stating again that video files are compressed by default. If something, you can resize the file so that it has less resolution, or process it to add a watermark.

Here is an answer that discribes how to resize a video file. And here is a tutorial on how to use moviepy on Cloud Functions.

Answer 2

You should have a look at this tutorial here and this gist there

You may be able to do some treatment with Cloud Functions after the upload but beware that memory and execution time are restricted and your script may fail on large files.

Answer 3

you can try this

<input type = "file"
onChange = {
  (e) => {
    let videoObj = e.currentTarget.files[0];
    // console.log(videoObj)
    let {
      name,
      size,
      type
    } = videoObj;

    size = size / 1000000
    //for not uploading the file more than 10 MB
    if (size > 10) {
      alert("please upload file less than 10 MB");
      return;
    }

    //code for only uploading the video

    type = type.split("/")[0];

    if (type != "video") {
      alert("please upload video only");
      return;
    }
  }
}
/>