How to Record Videos in ReactJS with Capacitor and Cordova Plugins
Tags: javascript, react, tutorial, ionic
Published: 2020-04-24 13:53:01

>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](https://dev.to/ionic/react-ionic-framework-and-hooks-5135) 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.
```javascript
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.
```javascript
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
```javascript
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.
```javascript
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
{% youtube pDzrUrEl87Y %}

###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