How can i add image type and size restriction while using expo-image-picker (like i can only pick jpeg type image and maximum memory of 2000kB)

user_8460578 0
Viewed 2633

I am using image-picker in one of my react native project. Now I need to add some restrictions while picking an image from gallery or capturing an image using camera.

I only want to pick jpeg type image and they must have a memory of less than 2000kB.

Is it possible using expo-image-picker? Thanks in advance.

expo react-native reactjs
2 Answers
// Install this npm
import * as FileSystem from 'expo-file-system'
import * as ImagePicker from 'expo-image-picker'

export const getFileInfo = async (fileURI: string) => {
   const fileInfo = await FileSystem.getInfoAsync(fileURI)
   return fileInfo
}

export const isLessThanTheMB = (fileSize: number, smallerThanSizeMB: number) => {
   const isOk = fileSize / 1024 / 1024 < smallerThanSizeMB
   return isOk
}


const handleUploadPhoto = async () => {
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        quality: 1,
      })

      if (result.cancelled) return

      const { uri, type } = result
      const fileInfo = await getFileInfo(result.uri)

      if (!fileInfo?.size) {
        alert("Can't select this file as the size is unknown.")
        return
      }

      if (type === 'image') {
        const isLt15MB = isLessThanTheMB(fileInfo.size, 15)
        if (!isLt15MB) {
          alert(`Image size must be smaller than 15MB!`)
          return
        }
      }

      if (type === 'video') {
        const isLt500MB = isLessThanTheMB(fileInfo.size, 500)
        if (!isLt500MB) {
          alert(`Video size must be smaller than 500MB!`)
          return
        }
      }

      // Save or process with the result.uri
    } catch (error) {
      console.info(error)
    }
 }
user_84657700

you could use something like this.

 const checkFileSize = async (fileURI: string) => {
        const fileSizeInBytes = await FileSystem.getInfoAsync(fileURI);
        return fileSizeInBytes;
    };

and then call it:

   const pickImage = async (
        cb: Dispatch<React.SetStateAction<string>>,
        cbv: Dispatch<React.SetStateAction<boolean>>
    ) => {
        try {
            const result = await ImagePicker.launchImageLibraryAsync({
                mediaTypes: ImagePicker.MediaTypeOptions.Images,
                quality: 1,
            });

            if (!result.cancelled) {
                const fileSize = await checkFileSize(result.uri);
                if (fileSize.size && fileSize.size < 2000000) {
                    cb(result.uri);
                    cbv(true);
                } else {
                    throw new Error();
                }
            }
        } catch (err) {
            Alert.alert(
                i18n.t('failure'),
                i18n.t('imageSizeTooBig'),
                [{ text: 'OK' }],
                { cancelable: false }
            );
        }
    };
user_144096450
Related