React Native(Expo) File object vs Javascript(jQuery) File object - Blob/File size differ (YouTube Data API)

user_12544596 0
Viewed 295

I am trying to create a File object in React Native to use that file (video) to upload it to YouTube Data v3 API. I made my app work without issue in plain Javascript and I am trying to make it work in React Native - the upload part works but I am having trouble getting the video file in React Native.

This is my working code in plain JavaScript using jQuery:

function getVideoFile() {
        return $('#file').get(0).files[0];      
      }

I just get the video file using jQuery (returns a File object) and send it to the API and it uploads without issues.

Here is my React Native so far:

let file = await fetch('./assets/video.mp4');
let videoFile = await file.blob();
var blob = videoFile.slice(0, videoFile.size, "video/mp4")
var f = new File([blob], "video.mp4", {type: "video/mp4"});

The upload to YouTube in React Native works without any errors but in My Videos page on YouTube I get

Processing abandoned
The video could not be processed

The only difference that I am seeing in my JavaScript and React Native code is the File object size property value. The size of the File object in JavaScript (1570024) is much larger than the size in React Native (3539) - its the same video file. Could someone please explain why the file size difference because I am struggling to understand and what am I doing wrong or what would be the correct way to read a video file in React Native into a File object?

Update 1

I tested my React Native fetch code in plain javascript and it gets the good size of the file and the uploaded video is successfully processed by YouTube. In my React Native app this same function behaves differently by getting a smaller file size.

async function getVideoFile() {     
    let file = await fetch('video.mp4');
    let videoFile = await file.blob();
    return new File([videoFile], "video.mp4", {type: "video/mp4"});     
}
youtube-data-api expo react-native blob javascript
1 Answers

I found the solution! In React Native first I need to use require to get the correct path.

var path = require("./assets/video.mp4");
let response = await fetch(path);
var blob = await response.blob();      
var file = new File([blob], "video.mp4", {type: "video/mp4"});

For some strange reason fetch() always returns 200 ok status in my React Native app even when the url/file doesn't exist.

user_125445960
Related