stream-chat-react-native-core 5.21.0 → 5.22.0-beta.10

package/src/components/Message/MessageSimple/utils/generateMarkdownText.test.ts

@@ -0,0 +1,23 @@
+import { generateMarkdownText } from './generateMarkdownText';
+
+describe('generateMarkdownText', () => {
+  it.each([
+    ['', null],
+    ['  test message  ', 'test message'],
+    ['https://www.getstream.io', '[https://www.getstream.io](https://www.getstream.io)'],
+    [
+      'https://getstream-production.s3-accelerate.amazonaws.com/N336903591601695/33e78ef89e64642862a75c5cca2541eaf6b1c924/trimmedVideos/alert/2_270_881/outputVideo.mp4?AWSAccessKeyId=AKIAVJAW2AD2SQVQCBXV&Expires=1699998768&Signature=zdEMCGzf4Pq++16YkPprvN5NAds=',
+      '[https://getstream-production.s3-accelerate.amazonaws.com/N336903591601695/33e78ef89e64642862a75c5cca2541eaf6b1c924/trimmedVideos/alert/2_270_881/outputVideo.mp4?AWSAccessKeyId=AKIAVJAW2AD2SQVQCBXV&...](https://getstream-production.s3-accelerate.amazonaws.com/N336903591601695/33e78ef89e64642862a75c5cca2541eaf6b1c924/trimmedVideos/alert/2_270_881/outputVideo.mp4?AWSAccessKeyId=AKIAVJAW2AD2SQVQCBXV&Expires=1699998768&Signature=zdEMCGzf4Pq++16YkPprvN5NAds=)',
+    ],
+    ['Hi @getstream.io', 'Hi @getstream.io'],
+    [
+      'Hi test@gmail.com @test@gmail.com',
+      'Hi [test@gmail.com](mailto:test@gmail.com) @test@gmail.com',
+    ],
+    ['Hi @getstream.io getstream.io', 'Hi @getstream.io [getstream.io](http://getstream.io)'],
+    ['Hi <Stream>', 'Hi \\<Stream\\>'],
+  ])('Returns the generated markdown text for %p and %p', (text, expected) => {
+    const result = generateMarkdownText(text);
+    expect(result).toBe(expected);
+  });
+});

package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts

@@ -2,16 +2,12 @@ import truncate from 'lodash/truncate';
 
 import { parseLinksFromText } from './parseLinks';
 
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
-import type { MessageType } from '../../../MessageList/hooks/useMessageList';
-
-export const generateMarkdownText = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  message: MessageType<StreamChatGenerics>,
-) => {
-  const { text } = message;
+// If you need to use any of the special characters literally (actually searching for a "*", for instance), you must escape it by putting a backslash in front of it.
+function escapeRegExp(text: string) {
+  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+}
 
+export const generateMarkdownText = (text?: string) => {
   if (!text) return null;
 
   // Trim the extra spaces from the text.
@@ -26,18 +22,21 @@ export const generateMarkdownText = <
       omission: '...',
     });
     // Convert raw links/emails in the text to respective markdown syntax.
-    // Eg: Hi getstream.io -> Hi [getstream.io](getstream.io).
-    const normalRegEx = new RegExp(linkInfo.raw, 'g');
+    // Eg: Hi @getstream.io -> Hi @[getstream.io](getstream.io).
+    const normalRegEx = new RegExp(escapeRegExp(linkInfo.raw), 'g');
     const markdown = `[${displayLink}](${linkInfo.encodedUrl})`;
     resultText = text.replace(normalRegEx, markdown);
 
     // After previous step, in some cases, the mentioned user after `@` might have a link/email so we convert it back to normal raw text.
     // Eg: Hi, @[test.user@gmail.com](mailto:test.user@gmail.com) to @test.user@gmail.com.
-    const mentionsRegex = new RegExp(`@\\[${displayLink}\\]\\(${linkInfo.encodedUrl}\\)`, 'g');
+    const mentionsRegex = new RegExp(
+      `@\\[${escapeRegExp(displayLink)}\\]\\(${escapeRegExp(linkInfo.encodedUrl)}\\)`,
+      'g',
+    );
     resultText = resultText.replace(mentionsRegex, `@${displayLink}`);
   }
 
-  resultText = resultText.replace(/[<&"'>]/g, '\\$&');
+  resultText = resultText.replace(/[<"'>]/g, '\\$&');
 
   return resultText;
 };

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -100,8 +100,9 @@ export const renderText = <
     onPress: onPressParam,
     preventPress,
   } = params;
+  const { text } = message;
 
-  const markdownText = generateMarkdownText<StreamChatGenerics>(message);
+  const markdownText = generateMarkdownText(text);
 
   const styles: MarkdownStyle = {
     ...defaultMarkdownStyles,
@@ -141,8 +142,17 @@ export const renderText = <
       : Linking.canOpenURL(url).then((canOpenUrl) => canOpenUrl && Linking.openURL(url));
   };
 
+  let previousLink: string | undefined;
   const linkReact: ReactNodeOutput = (node, output, { ...state }) => {
-    const url = node.target;
+    let url: string;
+    // Some long URLs with `&` separated parameters are trimmed and the url only until first param is taken.
+    // This is done because of internal link been taken from the original URL in react-native-markdown-package. So, we check for `withinLink` and take the previous full URL.
+    if (state?.withinLink && previousLink) {
+      url = previousLink;
+    } else {
+      url = node.target;
+      previousLink = node.target;
+    }
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { FlatList, I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
+import dayjs from 'dayjs';
+
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
 import { ChatContextValue, useChatContext } from '../../contexts';
 import {
-  FileUpload,
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
@@ -18,7 +19,7 @@ import { useTranslationContext } from '../../contexts/translationContext/Transla
 import { Close } from '../../icons/Close';
 import { Warning } from '../../icons/Warning';
 import { isAudioPackageAvailable } from '../../native';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { DefaultStreamChatGenerics, FileUpload } from '../../types/types';
 import { FileState, getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
 import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 import { WritingDirectionAwareText } from '../RTLComponents/WritingDirectionAwareText';
@@ -101,6 +102,19 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
     },
   } = useTheme();
 
+  const ONE_HOUR_IN_SECONDS = 3600;
+  let durationLabel = '00:00';
+  const videoDuration = item.file.duration;
+
+  if (videoDuration) {
+    const isDurationLongerThanHour = videoDuration / ONE_HOUR_IN_SECONDS >= 1;
+    const formattedDurationParam = isDurationLongerThanHour ? 'HH:mm:ss' : 'mm:ss';
+    const formattedVideoDuration = dayjs
+      .duration(videoDuration, 'second')
+      .format(formattedDurationParam);
+    durationLabel = formattedVideoDuration;
+  }
+
   const { t } = useTranslationContext();
 
   return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (
@@ -117,7 +131,7 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
     </View>
   ) : (
     <WritingDirectionAwareText style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-      {item.file.duration || getFileSizeDisplayText(item.file.size)}
+      {videoDuration ? durationLabel : getFileSizeDisplayText(item.file.size)}
     </WritingDirectionAwareText>
   );
 };

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -13,7 +13,6 @@ import { UploadProgressIndicator } from './UploadProgressIndicator';
 
 import { ChatContextValue, useChatContext } from '../../contexts';
 import {
-  ImageUpload,
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
@@ -21,7 +20,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { Close } from '../../icons/Close';
 import { Warning } from '../../icons/Warning';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { DefaultStreamChatGenerics, ImageUpload } from '../../types/types';
 import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
 
 const IMAGE_PREVIEW_SIZE = 100;

package/src/components/MessageInput/MessageInput.tsx

@@ -288,7 +288,7 @@ const MessageInputWithContext = <
     // Check if the file size of the image exceeds the threshold of 100MB
     if (
       imageToUpload &&
-      Number(imageToUpload.fileSize) / MEGA_BYTES_TO_BYTES > MAX_FILE_SIZE_TO_UPLOAD_IN_MB
+      Number(imageToUpload.size) / MEGA_BYTES_TO_BYTES > MAX_FILE_SIZE_TO_UPLOAD_IN_MB
     ) {
       Alert.alert(
         t(

package/src/components/MessageInput/UploadProgressIndicator.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import {
   ActivityIndicator,
   GestureResponderEvent,
@@ -24,7 +24,7 @@ export type UploadProgressIndicatorProps = {
   type?: 'in_progress' | 'retry' | 'not_supported' | 'inactive' | null;
 };
 
-export const UploadProgressIndicator: React.FC<UploadProgressIndicatorProps> = (props) => {
+export const UploadProgressIndicator = (props: PropsWithChildren<UploadProgressIndicatorProps>) => {
   const { action, children, style, type } = props;
 
   const {

package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewExpo.test.tsx

@@ -5,7 +5,6 @@ import { act } from 'react-test-renderer';
 import { fireEvent, render } from '@testing-library/react-native';
 
 import {
-  FileUpload,
   MessageInputContext,
   MessageInputContextValue,
 } from '../../../contexts/messageInputContext/MessageInputContext';
@@ -13,6 +12,7 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 
 import { generateFileUploadPreview } from '../../../mock-builders/generator/attachment';
+import type { FileUpload } from '../../../types/types';
 import { AudioAttachment, AudioAttachmentProps } from '../../Attachment/AudioAttachment';
 
 jest.mock('../../../native.ts', () => ({

package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewNative.test.tsx

@@ -5,7 +5,6 @@ import { act } from 'react-test-renderer';
 import { fireEvent, render } from '@testing-library/react-native';
 
 import {
-  FileUpload,
   MessageInputContext,
   MessageInputContextValue,
 } from '../../../contexts/messageInputContext/MessageInputContext';
@@ -13,6 +12,7 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 
 import { generateFileUploadPreview } from '../../../mock-builders/generator/attachment';
+import type { FileUpload } from '../../../types/types';
 import { AudioAttachment, AudioAttachmentProps } from '../../Attachment/AudioAttachment';
 
 jest.mock('../../../native.ts', () => {

package/src/components/MessageInput/__tests__/MessageInput.test.js

@@ -39,12 +39,12 @@ describe('MessageInput', () => {
       selectedImages: [
         generateImageAttachment({
           file: { height: 100, uri: 'https://picsum.photos/200/300', width: 100 },
-          fileSize: 500000000,
+          size: 500000000,
           uri: 'https://picsum.photos/200/300',
         }),
         generateImageAttachment({
           file: { height: 100, uri: 'https://picsum.photos/200/300', width: 100 },
-          fileSize: 600000000,
+          size: 600000000,
           uri: 'https://picsum.photos/200/300',
         }),
       ],

package/src/components/MessageList/InlineUnreadIndicator.tsx

@@ -4,7 +4,7 @@ import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { vw } from '../../utils/utils';
+import { useViewport } from '../../hooks/useViewport';
 
 const styles = StyleSheet.create({
   container: {
@@ -28,6 +28,7 @@ export const InlineUnreadIndicator: React.FC = () => {
     },
   } = useTheme();
   const { t } = useTranslationContext();
+  const { vw } = useViewport();
 
   return (
     <View style={[styles.container, container]}>

package/src/components/MessageOverlay/MessageActionList.tsx

@@ -10,8 +10,8 @@ import {
 } from '../../contexts/messageOverlayContext/MessageOverlayContext';
 import type { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { vw } from '../../utils/utils';
 
 export type MessageActionListPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -52,6 +52,7 @@ const MessageActionListWithContext = <
     message,
     messageReactions,
   };
+  const { vw } = useViewport();
 
   const {
     theme: {
@@ -89,7 +90,7 @@ const MessageActionListWithContext = <
         width.value = layout.width;
         height.value = layout.height;
       }}
-      style={[styles.container, { backgroundColor: white_snow }, showScreenStyle]}
+      style={[styles.container, { backgroundColor: white_snow, minWidth: vw(65) }, showScreenStyle]}
       testID='message-action-list'
     >
       {messageActions?.map((messageAction, index) => (
@@ -154,17 +155,8 @@ const styles = StyleSheet.create({
   container: {
     borderRadius: 16,
     marginTop: 8,
-    minWidth: vw(65),
     overflow: 'hidden',
   },
-  row: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    minWidth: vw(65),
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-  },
   titleStyle: {
     paddingLeft: 20,
   },

package/src/components/MessageOverlay/MessageActionListItem.tsx

@@ -6,8 +6,8 @@ import Animated from 'react-native-reanimated';
 import { useMessageActionAnimation } from './hooks/useMessageActionAnimation';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { vw } from '../../utils/utils';
 import type { MessageOverlayPropsWithContext } from '../MessageOverlay/MessageOverlay';
 
 export type ActionType =
@@ -50,6 +50,7 @@ const MessageActionListItemWithContext = <
   props: MessageActionListItemProps<StreamChatGenerics>,
 ) => {
   const { action, actionType, icon, index, length, title, titleStyle } = props;
+  const { vw } = useViewport();
 
   const {
     theme: {
@@ -65,6 +66,9 @@ const MessageActionListItemWithContext = <
       <Animated.View
         style={[
           styles.row,
+          {
+            minWidth: vw(65),
+          },
           index !== length - 1 ? { ...styles.bottomBorder, borderBottomColor: border } : {},
           animatedStyle,
           messageActions.actionContainer,
@@ -114,7 +118,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'flex-start',
-    minWidth: vw(65),
     paddingHorizontal: 20,
     paddingVertical: 10,
   },

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -41,8 +41,8 @@ import {
 } from '../../contexts/overlayContext/OverlayContext';
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 
+import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { vh, vw } from '../../utils/utils';
 import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
 import {
   OverlayReactions as DefaultOverlayReactions,
@@ -78,8 +78,6 @@ const styles = StyleSheet.create({
   scrollView: { overflow: Platform.OS === 'ios' ? 'visible' : 'scroll' },
 });
 
-const screenHeight = vh(100);
-const halfScreenHeight = vh(50);
 const DefaultMessageTextNumberOfLines = 5;
 
 export type MessageOverlayPropsWithContext<
@@ -154,6 +152,10 @@ const MessageOverlayWithContext = <
   };
 
   const { theme } = useTheme();
+  const { vh, vw } = useViewport();
+
+  const screenHeight = vh(100);
+  const halfScreenHeight = vh(50);
 
   const myMessageTheme = messagesContext?.myMessageTheme;
   const wrapMessageInTheme = clientId === message?.user?.id && !!myMessageTheme;

package/src/components/Thread/components/ThreadFooterComponent.tsx

@@ -12,8 +12,8 @@ import {
   useThreadContext,
 } from '../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useViewport } from '../../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { vw } from '../../../utils/utils';
 
 const styles = StyleSheet.create({
   absolute: { position: 'absolute' },
@@ -47,6 +47,7 @@ const ThreadFooterComponentWithContext = <
 ) => {
   const { Message, thread } = props;
   const { t } = useTranslationContext();
+  const { vw } = useViewport();
 
   const {
     theme: {

package/src/contexts/channelContext/ChannelContext.tsx

@@ -137,6 +137,11 @@ export type ChannelContextValue<
   scrollToFirstUnreadThreshold: number;
   setLastRead: React.Dispatch<React.SetStateAction<Date | undefined>>;
   setTargetedMessage: (messageId: string) => void;
+  /**
+   * Abort controller for cancelling async requests made for uploading images/files
+   * Its a map of filename and AbortController
+   */
+  uploadAbortControllerRef: React.MutableRefObject<Map<string, AbortController>>;
   /**
    *
    * ```json

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -35,8 +35,16 @@ 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, pickDocument } from '../../native';
-import type { Asset, DefaultStreamChatGenerics, File, UnknownType } from '../../types/types';
+import { pickDocument } from '../../native';
+import type {
+  Asset,
+  DefaultStreamChatGenerics,
+  File,
+  FileUpload,
+  ImageUpload,
+  UnknownType,
+} from '../../types/types';
+import { compressedImageURI } from '../../utils/compressImage';
 import { removeReservedFields } from '../../utils/removeReservedFields';
 import {
   ACITriggerSettings,
@@ -58,28 +66,6 @@ import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
-export type FileUpload = {
-  file: File;
-  id: string;
-  state: FileStateValue;
-  duration?: number;
-  paused?: boolean;
-  progress?: number;
-  thumb_url?: string;
-  url?: string;
-};
-
-export type ImageUpload = {
-  file: Partial<Asset> & {
-    name?: string;
-  };
-  id: string;
-  state: FileStateValue;
-  height?: number;
-  url?: string;
-  width?: number;
-};
-
 export type MentionAllAppUsersQuery<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
@@ -438,7 +424,8 @@ export const MessageInputProvider = <
 
   const channelCapabities = useOwnCapabilitiesContext();
 
-  const { channel, giphyEnabled } = useChannelContext<StreamChatGenerics>();
+  const { channel, giphyEnabled, uploadAbortControllerRef } =
+    useChannelContext<StreamChatGenerics>();
   const { thread } = useThreadContext<StreamChatGenerics>();
   const { t } = useTranslationContext();
   const inputBoxRef = useRef<TextInput | null>(null);
@@ -640,20 +627,21 @@ export const MessageInputProvider = <
     setText('');
   };
 
-  const mapImageUploadToAttachment = (image: ImageUpload) => {
-    const mime_type: string | boolean = lookup(image.file.filename as string);
+  const mapImageUploadToAttachment = (image: ImageUpload): Attachment<StreamChatGenerics> => {
+    const mime_type: string | boolean = lookup(image.file.name as string);
+    const name = image.file.name as string;
     return {
-      fallback: image.file.name,
+      fallback: name,
       image_url: image.url,
       mime_type: mime_type ? mime_type : undefined,
       original_height: image.height,
       original_width: image.width,
-      originalFile: image.file,
+      originalImage: image.file,
       type: 'image',
-    } as Attachment;
+    };
   };
 
-  const mapFileUploadToAttachment = (file: FileUpload) => {
+  const mapFileUploadToAttachment = (file: FileUpload): Attachment<StreamChatGenerics> => {
     if (file.file.mimeType?.startsWith('image/')) {
       return {
         fallback: file.file.name,
@@ -968,11 +956,24 @@ export const MessageInputProvider = <
       if (value.doDocUploadRequest) {
         response = await value.doDocUploadRequest(file, channel);
       } else if (channel && file.uri) {
+        uploadAbortControllerRef.current.set(
+          file.name,
+          client.createAbortControllerForNextRequest(),
+        );
         response = await channel.sendFile(file.uri, file.name, file.mimeType);
+        uploadAbortControllerRef.current.delete(file.name);
       }
       const extraData: Partial<FileUpload> = { thumb_url: response.thumb_url, url: response.file };
       setFileUploads(getUploadSetStateAction(id, FileState.UPLOADED, extraData));
     } catch (error: unknown) {
+      if (
+        error instanceof Error &&
+        (error.name === 'AbortError' || error.name === 'CanceledError')
+      ) {
+        // nothing to do
+        uploadAbortControllerRef.current.delete(file.name);
+        return;
+      }
       handleFileOrImageUploadError(error, false, id);
     }
   };
@@ -986,52 +987,55 @@ export const MessageInputProvider = <
 
     let response = {} as SendFileAPIResponse;
 
+    const uri = file.uri || '';
+    const filename = file.name ?? uri.replace(/^(file:\/\/|content:\/\/)/, '');
+
     try {
-      const uri = file.uri || '';
-      /**
-       * We skip compression if:
-       * - the file is from the camera as that should already be compressed
-       * - the file has no height/width value to maintain for compression
-       * - the compressImageQuality number is not present or is 1 (meaning no compression)
-       */
-      const compressedUri = await (file.source === 'camera' ||
-      !file.height ||
-      !file.width ||
-      typeof value.compressImageQuality !== 'number' ||
-      value.compressImageQuality === 1
-        ? uri
-        : compressImage({
-            compressImageQuality: value.compressImageQuality,
-            height: file.height,
-            uri,
-            width: file.width,
-          }));
-      const filename = file.filename ?? uri.replace(/^(file:\/\/|content:\/\/)/, '');
+      const compressedUri = await compressedImageURI(file, value.compressImageQuality);
       const contentType = lookup(filename) || 'multipart/form-data';
       if (value.doImageUploadRequest) {
         response = await value.doImageUploadRequest(file, channel);
       } else if (compressedUri && channel) {
         if (value.sendImageAsync) {
-          channel.sendImage(compressedUri, filename, contentType).then((res) => {
-            if (asyncIds.includes(id)) {
-              // Evaluates to true if user hit send before image successfully uploaded
-              setAsyncUploads((prevAsyncUploads) => {
-                prevAsyncUploads[id] = {
-                  ...prevAsyncUploads[id],
-                  state: FileState.UPLOADED,
-                  url: res.file,
-                };
-                return prevAsyncUploads;
-              });
-            } else {
-              const newImageUploads = getUploadSetStateAction<ImageUpload>(id, FileState.UPLOADED, {
-                url: res.file,
-              });
-              setImageUploads(newImageUploads);
-            }
-          });
+          uploadAbortControllerRef.current.set(
+            filename,
+            client.createAbortControllerForNextRequest(),
+          );
+          channel.sendImage(compressedUri, filename, contentType).then(
+            (res) => {
+              uploadAbortControllerRef.current.delete(filename);
+              if (asyncIds.includes(id)) {
+                // Evaluates to true if user hit send before image successfully uploaded
+                setAsyncUploads((prevAsyncUploads) => {
+                  prevAsyncUploads[id] = {
+                    ...prevAsyncUploads[id],
+                    state: FileState.UPLOADED,
+                    url: res.file,
+                  };
+                  return prevAsyncUploads;
+                });
+              } else {
+                const newImageUploads = getUploadSetStateAction<ImageUpload>(
+                  id,
+                  FileState.UPLOADED,
+                  {
+                    url: res.file,
+                  },
+                );
+                setImageUploads(newImageUploads);
+              }
+            },
+            () => {
+              uploadAbortControllerRef.current.delete(filename);
+            },
+          );
         } else {
+          uploadAbortControllerRef.current.set(
+            filename,
+            client.createAbortControllerForNextRequest(),
+          );
           response = await channel.sendImage(compressedUri, filename, contentType);
+          uploadAbortControllerRef.current.delete(filename);
         }
       }
 
@@ -1044,6 +1048,14 @@ export const MessageInputProvider = <
         setImageUploads(newImageUploads);
       }
     } catch (error) {
+      if (
+        error instanceof Error &&
+        (error.name === 'AbortError' || error.name === 'CanceledError')
+      ) {
+        // nothing to do
+        uploadAbortControllerRef.current.delete(filename);
+        return;
+      }
       handleFileOrImageUploadError(error, true, id);
     }
   };

package/src/contexts/messageInputContext/__tests__/__snapshots__/sendMessage.test.tsx.snap

@@ -7,7 +7,7 @@ Object {
       "fallback": undefined,
       "image_url": undefined,
       "mime_type": undefined,
-      "originalFile": Object {
+      "originalImage": Object {
         "uri": "http://www.jackblack.com/tenac_iousd.bmp",
       },
       "original_height": undefined,
@@ -106,7 +106,7 @@ Object {
       "fallback": undefined,
       "image_url": undefined,
       "mime_type": undefined,
-      "originalFile": Object {
+      "originalImage": Object {
         "uri": "http://www.jackblack.com/tenac_iousd.bmp",
       },
       "original_height": undefined,
@@ -117,7 +117,7 @@ Object {
       "fallback": undefined,
       "image_url": undefined,
       "mime_type": undefined,
-      "originalFile": Object {
+      "originalImage": Object {
         "uri": "http://www.jackblack.com/tenac_iousd.bmp",
       },
       "original_height": undefined,