fix: multiple image upload issue using native image picker and generic improvements for upload

package/expo-package/src/optionalDependencies/takePhoto.ts

@@ -43,6 +43,8 @@ export const takePhoto = ImagePicker
           // since we only support single photo upload for now we will only be focusing on 0'th element.
           const photo = assets && assets[0];
 
+          console.log(photo);
+
           if (canceled === false && photo && photo.height && photo.width && photo.uri) {
             let size: Size = {};
             if (Platform.OS === 'android') {
@@ -74,6 +76,7 @@ export const takePhoto = ImagePicker
 
             return {
               cancelled: false,
+              size: photo.fileSize,
               source: 'camera',
               uri: photo.uri,
               ...size,

package/native-package/src/optionalDependencies/pickImage.ts

@@ -10,7 +10,9 @@ try {
 export const pickImage = ImagePicker
   ? async () => {
       try {
-        const result = await ImagePicker.launchImageLibrary({ mediaType: 'mixed' });
+        const result = await ImagePicker.launchImageLibrary({
+          mediaType: 'mixed',
+        });
         const canceled = result.didCancel;
         const errorCode = result.errorCode;
 
@@ -20,7 +22,7 @@ export const pickImage = ImagePicker
         if (!canceled) {
           const assets = result.assets.map((asset) => ({
             ...asset,
-            duration: asset.duration * 1000, // in milliseconds
+            duration: asset.duration ? asset.duration * 1000 : undefined, // in milliseconds
             name: asset.fileName,
             size: asset.fileSize,
             source: 'picker',

package/native-package/src/optionalDependencies/takePhoto.ts

@@ -60,6 +60,7 @@ export const takePhoto = ImagePicker
           }
           return {
             cancelled: false,
+            size: photo.size,
             source: 'camera',
             uri: photo.path,
             ...size,

package/src/components/MessageInput/MessageInput.tsx

@@ -49,7 +49,7 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import { triggerHaptic } from '../../native';
+import { isImageMediaLibraryAvailable, triggerHaptic } from '../../native';
 import type { Asset, DefaultStreamChatGenerics } from '../../types/types';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 
@@ -118,7 +118,6 @@ type MessageInputPropsWithContext<
     | 'FileUploadPreview'
     | 'fileUploads'
     | 'giphyActive'
-    | 'hasImagePicker'
     | 'ImageUploadPreview'
     | 'imageUploads'
     | 'Input'
@@ -185,7 +184,6 @@ const MessageInputWithContext = <
     FileUploadPreview,
     fileUploads,
     giphyActive,
-    hasImagePicker,
     ImageUploadPreview,
     imageUploads,
     Input,
@@ -349,46 +347,71 @@ const MessageInputWithContext = <
     imagesToRemove.forEach((image) => removeImage(image.id));
   };
 
+  const uploadFilesHandler = async () => {
+    const fileToUpload = selectedFiles.find((selectedFile) => {
+      const uploadedFile = fileUploads.find(
+        (fileUpload) =>
+          fileUpload.file.uri === selectedFile.uri || fileUpload.url === selectedFile.uri,
+      );
+      return !uploadedFile;
+    });
+    if (fileToUpload) await uploadNewFile(fileToUpload);
+  };
+
+  const removeFilesHandler = () => {
+    const filesToRemove = fileUploads.filter(
+      (fileUpload) =>
+        !selectedFiles.find(
+          (selectedFile) =>
+            selectedFile.uri === fileUpload.file.uri || selectedFile.uri === fileUpload.url,
+        ),
+    );
+    filesToRemove.forEach((file) => removeFile(file.id));
+  };
+
+  /**
+   * When a user selects or deselects an image in the image picker using media library.
+   */
   useEffect(() => {
-    if (imagesForInput) {
-      if (selectedImagesLength > imageUploadsLength) {
-        /** User selected an image in bottom sheet attachment picker */
-        uploadImagesHandler();
-      } else {
-        /** User de-selected an image in bottom sheet attachment picker */
-        removeImagesHandler();
+    const uploadOrRemoveImage = async () => {
+      if (imagesForInput) {
+        if (selectedImagesLength > imageUploadsLength) {
+          /** User selected an image in bottom sheet attachment picker */
+          await uploadImagesHandler();
+        } else {
+          /** User de-selected an image in bottom sheet attachment picker */
+          removeImagesHandler();
+        }
       }
-    }
+    };
+    // If image picker is not available, don't do anything
+    if (!isImageMediaLibraryAvailable()) return;
+    uploadOrRemoveImage();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedImagesLength]);
 
+  /**
+   * When a user selects or deselects a video in the image picker using media library.
+   */
   useEffect(() => {
-    if (selectedFilesLength > fileUploadsLength) {
-      /** User selected a video in bottom sheet attachment picker */
-      const fileToUpload = selectedFiles.find((selectedFile) => {
-        const uploadedFile = fileUploads.find(
-          (fileUpload) =>
-            fileUpload.file.uri === selectedFile.uri || fileUpload.url === selectedFile.uri,
-        );
-        return !uploadedFile;
-      });
-      if (fileToUpload) uploadNewFile(fileToUpload);
-    } else {
-      /** User de-selected a video in bottom sheet attachment picker */
-      const filesToRemove = fileUploads.filter(
-        (fileUpload) =>
-          !selectedFiles.find(
-            (selectedFile) =>
-              selectedFile.uri === fileUpload.file.uri || selectedFile.uri === fileUpload.url,
-          ),
-      );
-      filesToRemove.forEach((file) => removeFile(file.id));
-    }
+    const uploadOrRemoveFile = async () => {
+      if (selectedFilesLength > fileUploadsLength) {
+        /** User selected a video in bottom sheet attachment picker */
+        await uploadFilesHandler();
+      } else {
+        /** User de-selected a video in bottom sheet attachment picker */
+        removeFilesHandler();
+      }
+    };
+    uploadOrRemoveFile();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFilesLength]);
 
+  /**
+   * This is for image attachments selected from attachment picker.
+   */
   useEffect(() => {
-    if (imagesForInput && hasImagePicker) {
+    if (imagesForInput && isImageMediaLibraryAvailable()) {
       if (imageUploadsLength < selectedImagesLength) {
         // /** User removed some image from seleted images within ImageUploadPreview. */
         const updatedSelectedImages = selectedImages.filter((selectedImage) => {
@@ -401,9 +424,7 @@ const MessageInputWithContext = <
         setSelectedImages(updatedSelectedImages);
       } else if (imageUploadsLength > selectedImagesLength) {
         /**
-         * User is editing some message which contains image attachments OR
-         * image attachment is added from custom image picker (other than the default bottomsheet image picker)
-         * using `uploadNewImage` function from `MessageInputContext`.
+         * User is editing some message which contains image attachments.
          **/
         setSelectedImages(
           imageUploads
@@ -418,10 +439,13 @@ const MessageInputWithContext = <
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imageUploadsLength, hasImagePicker]);
+  }, [imageUploadsLength]);
 
+  /**
+   * This is for video attachments selected from attachment picker.
+   */
   useEffect(() => {
-    if (hasImagePicker) {
+    if (isImageMediaLibraryAvailable()) {
       if (fileUploadsLength < selectedFilesLength) {
         /** User removed some video from seleted files within ImageUploadPreview. */
         const updatedSelectedFiles = selectedFiles.filter((selectedFile) => {
@@ -434,9 +458,7 @@ const MessageInputWithContext = <
         setSelectedFiles(updatedSelectedFiles);
       } else if (fileUploadsLength > selectedFilesLength) {
         /**
-         * User is editing some message which contains video attachments OR
-         * video attachment is added from custom image picker (other than the default bottom-sheet image picker)
-         * using `uploadNewFile` function from `MessageInputContext`.
+         * User is editing some message which contains video attachments.
          **/
         setSelectedFiles(
           fileUploads.map((fileUpload) => ({
@@ -450,9 +472,10 @@ const MessageInputWithContext = <
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fileUploadsLength, hasImagePicker]);
+  }, [fileUploadsLength]);
 
   const editingExists = !!editing;
+
   useEffect(() => {
     if (editing && inputBoxRef.current) {
       inputBoxRef.current.focus();
@@ -1036,7 +1059,6 @@ export const MessageInput = <
     FileUploadPreview,
     fileUploads,
     giphyActive,
-    hasImagePicker,
     ImageUploadPreview,
     imageUploads,
     Input,
@@ -1117,7 +1139,6 @@ export const MessageInput = <
         FileUploadPreview,
         fileUploads,
         giphyActive,
-        hasImagePicker,
         ImageUploadPreview,
         imageUploads,
         Input,

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -657,7 +657,7 @@ export const MessageInputProvider = <
       );
     }
     if (!photo.cancelled) {
-      setSelectedImages((images) => [...images, photo]);
+      await uploadNewImage(photo);
     }
   };
 
@@ -677,14 +677,11 @@ export const MessageInputProvider = <
       );
     }
     if (result.assets && result.assets.length > 0) {
-      result.assets.forEach((asset) => {
+      result.assets.forEach(async (asset) => {
         if (asset.type.includes('image')) {
-          setSelectedImages((prevImages) => [...prevImages, asset]);
+          await uploadNewImage(asset);
         } else {
-          setSelectedFiles((prevFiles) => [
-            ...prevFiles,
-            { ...asset, mimeType: asset.type, type: FileTypes.Video },
-          ]);
+          await uploadNewFile({ ...asset, mimeType: asset.type, type: FileTypes.Video });
         }
       });
     }
@@ -740,15 +737,15 @@ export const MessageInputProvider = <
     });
 
     if (!result.cancelled && result.assets) {
-      result.assets.forEach((asset) => {
+      result.assets.forEach(async (asset) => {
         /**
          * TODO: The current tight coupling of images to the image
          * picker does not allow images picked from the file picker
          * to be rendered in a preview via the uploadNewImage call.
          * This should be updated alongside allowing image a file
          * uploads together.
          */
-        uploadNewFile(asset);
+        await uploadNewFile(asset);
       });
     }
   };
@@ -1291,7 +1288,7 @@ export const MessageInputProvider = <
     ]);
 
     if (isAllowed) {
-      uploadFile({ newFile });
+      await uploadFile({ newFile });
     }
   };
 
@@ -1333,7 +1330,7 @@ export const MessageInputProvider = <
     ]);
 
     if (isAllowed) {
-      uploadImage({ newImage });
+      await uploadImage({ newImage });
     }
   };