fix: image/video picker upload issue from expo apps and getLocalAssetURI improvements (#2220)

* fix: image/video picker upload issue from expo apps and getLocalAssetURI improvements

* fix: function name and max file condition

Author: khushal87

examples/TypeScriptMessaging/App.tsx

@@ -158,7 +158,7 @@ const ThreadScreen: React.FC<ThreadScreenProps> = ({ navigation }) => {
     });
   }, [overlay]);
 
-  if (!channel) return;
+  if (!channel) return null;
 
   return (
     <SafeAreaView>

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -209,9 +209,14 @@ export const AttachmentPicker = React.forwardRef(
       maxNumberOfFiles,
       numberOfAttachmentPickerImageColumns,
       numberOfUploads: selectedFiles.length + selectedImages.length,
+      // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
       selected:
-        selectedImages.some((image) => image.uri === asset.uri) ||
-        selectedFiles.some((file) => file.uri === asset.uri),
+        selectedImages.some((image) =>
+          image.id ? image.id === asset.id : image.uri === asset.uri,
+        ) ||
+        selectedFiles.some((file) => (file.id ? file.id === asset.id : file.uri === asset.uri)),
+      selectedFiles,
+      selectedImages,
       setSelectedFiles,
       setSelectedImages,
     }));

package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx

@@ -1,30 +1,32 @@
 import React from 'react';
 
-import { Alert, ImageBackground, StyleSheet, Text, View } from 'react-native';
+import { Alert, ImageBackground, Platform, StyleSheet, Text, View } from 'react-native';
 
 import { TouchableOpacity } from '@gorhom/bottom-sheet';
 import dayjs from 'dayjs';
 import { lookup } from 'mime-types';
 
+import type { AttachmentPickerContextValue } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { Recorder } from '../../../icons';
+import { getLocalAssetUri } from '../../../native';
 import type { Asset, File } from '../../../types/types';
 import { vw } from '../../../utils/utils';
 
-type AttachmentPickerItemType = {
+type AttachmentPickerItemType = Pick<
+  AttachmentPickerContextValue,
+  'selectedFiles' | 'setSelectedFiles' | 'setSelectedImages' | 'selectedImages' | 'maxNumberOfFiles'
+> & {
   asset: Asset;
   ImageOverlaySelectedComponent: React.ComponentType;
-  maxNumberOfFiles: number;
   numberOfUploads: number;
   selected: boolean;
-  setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
-  setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
   numberOfAttachmentPickerImageColumns?: number;
 };
 
-type AttachmentImageProps = Omit<AttachmentPickerItemType, 'setSelectedFiles'>;
+type AttachmentImageProps = Omit<AttachmentPickerItemType, 'setSelectedFiles' | 'selectedFiles'>;
 
-type AttachmentVideoProps = Omit<AttachmentPickerItemType, 'setSelectedImages'>;
+type AttachmentVideoProps = Omit<AttachmentPickerItemType, 'setSelectedImages' | 'selectedImages'>;
 
 const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
   const {
@@ -34,6 +36,7 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
     numberOfAttachmentPickerImageColumns,
     numberOfUploads,
     selected,
+    selectedFiles,
     setSelectedFiles,
   } = props;
 
@@ -61,29 +64,43 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
+  /* Patches video files with uri and mimetype */
+  const patchVideoFile = async (files: File[]) => {
+    // For the case of Expo CLI where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
+    const localAssetURI = Platform.OS === 'ios' && asset.id && (await getLocalAssetUri(asset.id));
+    const uri = localAssetURI || asset.uri || '';
+    // We need a mime-type to upload a video file.
+    const mimeType = lookup(asset.filename) || 'multipart/form-data';
+    return [
+      ...files,
+      {
+        duration: durationLabel,
+        id: asset.id,
+        mimeType,
+        name: asset.filename,
+        size: asset.fileSize,
+        uri,
+      },
+    ];
+  };
+
+  const updateSelectedFiles = async () => {
+    if (numberOfUploads >= maxNumberOfFiles) {
+      Alert.alert('Maximum number of files reached');
+      return;
+    }
+    const files = await patchVideoFile(selectedFiles);
+    setSelectedFiles(files);
+  };
+
   const onPressVideo = () => {
     if (selected) {
-      setSelectedFiles((files) => files.filter((file) => file.uri !== asset.uri));
+      setSelectedFiles((files) =>
+        // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
+        files.filter((file) => (file.id ? file.id !== asset.id : file.uri !== asset.uri)),
+      );
     } else {
-      setSelectedFiles((files) => {
-        if (numberOfUploads >= maxNumberOfFiles) {
-          Alert.alert('Maximum number of files reached');
-          return files;
-        }
-        // We need a mime-type to upload a video file.
-        const mimeType = lookup(asset.filename) || 'multipart/form-data';
-        return [
-          ...files,
-          {
-            duration: durationLabel,
-            id: asset.id,
-            mimeType,
-            name: asset.filename,
-            size: asset.fileSize,
-            uri: asset.uri,
-          },
-        ];
-      });
+      updateSelectedFiles();
     }
   };
 
@@ -126,6 +143,7 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
     numberOfAttachmentPickerImageColumns,
     numberOfUploads,
     selected,
+    selectedImages,
     setSelectedImages,
   } = props;
   const {
@@ -139,17 +157,37 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
 
   const { uri } = asset;
 
+  /* Patches image files with uri */
+  const patchImageFile = async (images: Asset[]) => {
+    // For the case of Expo CLI where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
+    const localAssetURI = Platform.OS === 'ios' && asset.id && (await getLocalAssetUri(asset.id));
+    const uri = localAssetURI || asset.uri || '';
+    return [
+      ...images,
+      {
+        ...asset,
+        uri,
+      },
+    ];
+  };
+
+  const updateSelectedImages = async () => {
+    if (numberOfUploads >= maxNumberOfFiles) {
+      Alert.alert('Maximum number of files reached');
+      return;
+    }
+    const images = await patchImageFile(selectedImages);
+    setSelectedImages(images);
+  };
+
   const onPressImage = () => {
     if (selected) {
-      setSelectedImages((images) => images.filter((image) => image.uri !== asset.uri));
+      // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
+      setSelectedImages((images) =>
+        images.filter((image) => (image.id ? image.id !== asset.id : image.uri !== asset.uri)),
+      );
     } else {
-      setSelectedImages((images) => {
-        if (numberOfUploads >= maxNumberOfFiles) {
-          Alert.alert('Maximum number of files reached');
-          return images;
-        }
-        return [...images, asset];
-      });
+      updateSelectedImages();
     }
   };
 
@@ -184,6 +222,8 @@ export const renderAttachmentPickerItem = ({ item }: { item: AttachmentPickerIte
     numberOfAttachmentPickerImageColumns,
     numberOfUploads,
     selected,
+    selectedFiles,
+    selectedImages,
     setSelectedFiles,
     setSelectedImages,
   } = item;
@@ -205,6 +245,7 @@ export const renderAttachmentPickerItem = ({ item }: { item: AttachmentPickerIte
         numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
         numberOfUploads={numberOfUploads}
         selected={selected}
+        selectedFiles={selectedFiles}
         setSelectedFiles={setSelectedFiles}
       />
     );
@@ -218,6 +259,7 @@ export const renderAttachmentPickerItem = ({ item }: { item: AttachmentPickerIte
       numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
       numberOfUploads={numberOfUploads}
       selected={selected}
+      selectedImages={selectedImages}
       setSelectedImages={setSelectedImages}
     />
   );

package/src/components/Channel/Channel.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
-import { KeyboardAvoidingViewProps, Platform, StyleSheet, Text, View } from 'react-native';
+import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
 
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
@@ -74,7 +74,7 @@ import {
   ThumbsUpReaction,
   WutReaction,
 } from '../../icons';
-import { FlatList as FlatListDefault, getLocalAssetUri, pickDocument } from '../../native';
+import { FlatList as FlatListDefault, pickDocument } from '../../native';
 import * as dbApi from '../../store/apis';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
@@ -1295,16 +1295,12 @@ const ChannelWithContext = <
           attachment.image_url &&
           isLocalUrl(attachment.image_url)
         ) {
-          // For the case of Expo CLI where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
-          const localAssetURI =
-            Platform.OS === 'ios' && file.id && (await getLocalAssetUri(file.id));
-          const uri = localAssetURI || file.uri || '';
-          const filename = file.name ?? uri.replace(/^(file:\/\/|content:\/\/)/, '');
+          const filename = file.name ?? file.uri.replace(/^(file:\/\/|content:\/\/)/, '');
           const contentType = lookup(filename) || 'multipart/form-data';
 
           const uploadResponse = doImageUploadRequest
             ? await doImageUploadRequest(file, channel)
-            : await channel.sendImage(uri, filename, contentType);
+            : await channel.sendImage(file.uri, filename, contentType);
 
           attachment.image_url = uploadResponse.file;
           delete attachment.originalFile;

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -1,7 +1,7 @@
 import type { LegacyRef } from 'react';
 import React, { PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
 import type { TextInput, TextInputProps } from 'react-native';
-import { Alert, Keyboard, Platform } from 'react-native';
+import { Alert, Keyboard } from 'react-native';
 
 import uniq from 'lodash/uniq';
 import { lookup } from 'mime-types';
@@ -35,7 +35,7 @@ import type { MoreOptionsButtonProps } from '../../components/MessageInput/MoreO
 import type { SendButtonProps } from '../../components/MessageInput/SendButton';
 import type { UploadProgressIndicatorProps } from '../../components/MessageInput/UploadProgressIndicator';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
-import { compressImage, getLocalAssetUri, pickDocument } from '../../native';
+import { compressImage, pickDocument } from '../../native';
 import type { Asset, DefaultStreamChatGenerics, File, UnknownType } from '../../types/types';
 import { removeReservedFields } from '../../utils/removeReservedFields';
 import {
@@ -984,9 +984,7 @@ export const MessageInputProvider = <
     let response = {} as SendFileAPIResponse;
 
     try {
-      // For the case of Expo CLI where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
-      const localAssetURI = Platform.OS === 'ios' && file.id && (await getLocalAssetUri(file.id));
-      const uri = localAssetURI || file.uri || '';
+      const uri = file.uri || '';
       /**
        * We skip compression if:
        * - the file is from the camera as that should already be compressed