Search code examples
react-nativeandroid-manifestreact-native-image-picker

React-Native-Image-Picker: How do I restrict user to upload video more than given length?


Can I do something to restrict a user to upload a video of duration more than 300 seconds? Either the bigger videos should be trimmed to 300s or the videos more than 300s should be disabled. I use durationLimit prop which is not working for android. I have used the following versions of this library:

"react-native-image-picker": "^2.3.4"

Then

"react-native-image-picker": "^3.5.0",

Then

"react-native-image-picker": "^4.0.2",

Neither working for me

import ImagePicker from "react-native-image-picker";
const uploadVideo = async () => {
    activateKeepAwake();
    let options = {
      title: "Select video",
      takePhotoButtonTitle: null,
      mediaType: "video",
      path: "video",
      quality: 1,
      videoQuality: "normal",
      durationLimit: 300,
      allowsEditing: true,
    };
    ImagePicker.showImagePicker(options, async (response) => {
      if (response.didCancel) {
        console.log("User cancelled image picker");
      } else if (response.error) {
        console.log("ImagePicker Error: ", response.error);
      } else if (response.customButton) {
        console.log("User tapped custom button: ", response.customButton);
      } else {
        if (response && response.uri) {
          let selectedUri;
          let videoFilePath;
          let selectedFileUri = response.uri;
          setVideoLoader(true);
          setModalAddVisible(false);
          if (
            Platform.OS === "ios" &&
            (selectedFileUri.includes(".mov") ||
              selectedFileUri.includes(".MOV"))
          ) {
            videoFilePath = await handleConvertToMP4(selectedFileUri);            
            selectedUri = "file://" + videoFilePath.path;
          } else {
            selectedUri =
              Platform.os === "ios"
                ? selectedFileUri
                : "file://" + response.path;
          }
          setVideoSource(null);
          setVideoSource(selectedUri);
          await createThumbnailForVideos(selectedUri, 1);
          var filename = selectedUri.substring(
            selectedUri.lastIndexOf("/") + 1,
            selectedUri.length
          );

          const file = {
            uri: selectedUri,
            name: selectedGroup.id + "-dev-" + filename,
          };
          uploadVideoOnS3(file, "video");
        }
      }
    });
  };

Here are my android permissions:

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Solution

  • According to the official documentation, the durationLimit prop works for already recorded video but not for live recording the video. Reference: https://github.com/react-native-image-picker/react-native-image-picker/issues/1738