How to Record Videos in ReactJS with Capacitor and Cordova Plugins

This is the second part of the series, please review Part One before hand ensure your code is ready for part two

Changes To The Firebase File Upload Hook

There is a need to modify the react-hook to handle videos being uploaded. In an attempt to keep the interface of the hook simple, we will derive the additional information of mime type and file name for the the video in the hook.

By looking at the type of the blob, one can determine if there is a need to add the proper extension on the file name when we upload it. we run into this issue because on IOS the mime type “quicktime” needs to be mapped to the extension “.mov”

In this example, we are assuming if it is a dataUrl we get, then it is an image so there is no need for me to make any changes to the hook at this point, but for the Blob, we need to account for the change in the mime type with the following code.

console.log("processing as File/Blob");
let fName = `${new Date().getTime()}`;

if (_value instanceof Blob) {
  if (_value.type.split("/")[1] === "quicktime") {
    fName = fName + ".mov";
  } else {
    fName = fName + "." + _value.type.split("/")[1];
  }
}

// setting the firebase properties for the file upload
let ref = storageRef.child("media/" + fName);
return ref.put(_value);}

Getting the Blob From The File

We need to make some additional imports to get information regarding the current platform, Capacitor.getPlatform and we are going to be using the file system so we need the File and DirectoryEntry to be imported also.

import { CameraResultType, Capacitor } from "@capacitor/core";
import { File, DirectoryEntry } from "@ionic-native/file";

Pretty certain there is a better way to handle this mess of converting the file path, but this is what I have so far.

We need to get the path and the file name from the media file and use the combination to resolve it to a format that can be read by the mobile device’s file system. We are accomplishing this by getting the DirectoryEntry using the File plugin

let resolvedPath: DirectoryEntry;
let path = media.fullPath.substring(0, media.fullPath.lastIndexOf("/"));
if (Capacitor.getPlatform() === "ios") {
  resolvedPath = await File.resolveDirectoryUrl("file://" + path);
} else {
  resolvedPath = await File.resolveDirectoryUrl(path);
}

Once we get the resolved path, we can then read the file into a blob using File.readAsArrayBuffer and upload the blob to firebase.

return File.readAsArrayBuffer(resolvedPath.nativeURL, media.name).then(
  (buffer: any) => {
    // get the buffer and make a blob to be saved
    let imgBlob = new Blob([buffer], {
      type: media.type,
    });
    setFileData(imgBlob);
  },
  (error: any) => console.log(error)
)

The hook attempts to upload the file to firebase whenever setFileData is called with a dataUrl or Blob, so the last part is to call the function exposed by the useFirebaseUpload hook and start the upload.

Conclusion

The real purpose of the blog post was to try and explain what is going on in the associated video and hopefully it has been helpful. Please take a look at the video and the source code provided and leave comments and questions below

See The Video Here

Links

Source Code: https://github.com/aaronksaunders/photo-video-react-cap-file-upload-hook
Firebase File Upload Hook: https://dev.to/ionic/react-ionic-framework-and-hooks-5135