fix: upload image issue when clicking a photo using expo-image-picker on Expo 51 (#2559)

* fix: upload image issue when clicking a photo using expo-image-picker

* fix: handle the filename using regex

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -87,6 +87,7 @@ import { removeReservedFields } from '../../utils/removeReservedFields';
 import {
   defaultEmojiSearchIndex,
   generateRandomId,
+  getFileNameFromPath,
   isBouncedMessage,
   isLocalUrl,
   MessageStatusTypes,
@@ -1574,7 +1575,7 @@ const ChannelWithContext = <
           attachment.image_url &&
           isLocalUrl(attachment.image_url)
         ) {
-          const filename = image.name ?? image.uri.replace(/^(file:\/\/|content:\/\/)/, '');
+          const filename = image.name ?? getFileNameFromPath(image.uri);
           // if any upload is in progress, cancel it
           const controller = uploadAbortControllerRef.current.get(filename);
           if (controller) {

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -64,6 +64,7 @@ import {
   FileState,
   FileStateValue,
   generateRandomId,
+  getFileNameFromPath,
   isBouncedMessage,
   TriggerSettings,
 } from '../../utils/utils';
@@ -1108,7 +1109,7 @@ export const MessageInputProvider = <
     let response = {} as SendFileAPIResponse;
 
     const uri = file.uri || '';
-    const filename = file.name ?? uri.replace(/^(file:\/\/|content:\/\/)/, '');
+    const filename = file.name ?? getFileNameFromPath(uri);
 
     try {
       const compressedUri = await compressedImageURI(file, value.compressImageQuality);

package/src/utils/utils.ts

@@ -638,3 +638,17 @@ export const reduceMessagesToString = <
 >(
   messages: FormatMessageResponse<StreamChatGenerics>[],
 ): string => messages.map(stringifyMessage).join();
+
+/**
+ * Utility to get the file name from the path using regex.
+ * `[^/]+` matches one or more characters that are not a slash (/), ensuring we capture the filename part.
+ * `\.` matches the period before the file extension.
+ * `[^/]+$` matches one or more characters that are not a slash (/) until the end of the string, capturing the file extension.
+ * @param path string
+ * @returns string
+ */
+export const getFileNameFromPath = (path: string) => {
+  const pattern = /[^/]+\.[^/]+$/;
+  const match = path.match(pattern);
+  return match ? match[0] : '';
+};