Picking large video files react native expo image picker

Question

Trying to pick a video file to upload to mux from react native expo image picker.

Has no problem picking videos of 75mb getting this response after a few seconds:

{uri: 'data:video/pm4;base64.AAAHDSHG...e.c.t', width: 0, height: 0, cancelled: false}

However when I try to pick a video file >1gb after 30 seconds or so I don't get any error message just success with empty uri e.g.

{uri: '', width: 0, height: 0, cancelled: false}

Has it got something to do with the size of base64?

How do I pick a large video file to send to a server with react native expo ? Many thanks in advance

E.g. Code

import React, { useState, useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import { Button } from 'react-native-paper';
import { connect } from 'react-redux';

import * as ImagePicker from 'expo-image-picker';

function CreateOnDemand(props) {

    const [image, setImage] = useState(null);

    const pickImage = async () => {
        // No permissions request is necessary for launching the image library
        let result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ImagePicker.MediaTypeOptions.All,
          allowsEditing: true,
        //   aspect: [4, 3],
          quality: 0.9,
          base64: true,
        });
    
        console.log("result ", result);
    
        if (!result.cancelled) {
            console.log("Success! ", result)

          setImage(result.uri);
        } else {
            console.log("Failed ", result)
        }
    };


    return (
    <View style={styles.container}>
        <View style={styles.contents}>
            <Button  onPress={pickImage}>
                Pick an image from camera roll
            </Button>
        </View>
    </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'space-evenly',
        alignItems: 'center', 
    },
    contents: {
        maxWidth: 600,
        width: "100%",
    },
})


const mapStateToProps = (store) => ({
    currentUser: store.userState.currentUser,
})


export default connect(mapStateToProps)(CreateOnDemand);

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-picker/picker": "2.2.1",
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/material-bottom-tabs": "^6.1.1",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.5.0",
    "expo": "^44.0.0",
    "expo-app-loading": "~1.3.0",
    "expo-av": "~10.2.0",
    "expo-cli": "^4.13.0",
    "expo-firebase-analytics": "~6.0.0",
    "expo-font": "~10.0.4",
    "expo-image-picker": "~12.0.1",
    "expo-linking": "~3.0.0",
    "expo-status-bar": "~1.2.0",
    "expo-web-browser": "~10.1.0",
    "firebase": "^9.6.6",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-circular-progress": "^1.3.7",
    "react-native-countdown-circle-timer": "^2.5.4",
    "react-native-dotenv": "^3.2.0",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-image-picker": "^4.7.3",
    "react-native-paper": "^4.11.2",
    "react-native-reanimated": "~2.3.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-svg": "12.1.1",
    "react-native-vector-icons": "^8.1.0",
    "react-native-web": "0.17.1",
    "react-native-webview": "11.15.0",
    "react-redux": "^7.2.5",
    "redux": "^4.1.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

Answer 1

When you upload a video or an image, expo-image-picker fetch that video and save a copy to your app cache.

Depending on free memory available, over 1GB is the huge size on the device and there's no memory available to allocate that file copy.

Always limiting video size for upload is recommended.

It recommended clearing the app cache after successfully file upload.

import * as FileSystem from "expo-file-system";

const purgeAppCache = async () => {
  try {
    const cacheDirectory = FileSystem.cacheDirectory;

    await FileSystem.deleteAsync(cacheDirectory);

    console.log("app cache purged...");
  } catch (error) {
    console.log(error);
  }
};

export default purgeAppCache;