fix: file upload indicators in composer

Author: isekovanic

examples/SampleApp/App.tsx

@@ -341,6 +341,7 @@ const DrawerNavigatorWrapper: React.FC<{
       enableOfflineSupport
       isMessageAIGenerated={isMessageAIGenerated}
       i18nInstance={i18nInstance}
+      useNativeMultipartUpload
     >
       <StreamChatProvider>
         <AppOverlayProvider>

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx

@@ -3,6 +3,7 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { LocalAttachmentUploadMetadata } from 'stream-chat';
 
+import { AttachmentFileUploadProgressIndicator } from '../../../../components/Attachment/AttachmentFileUploadProgressIndicator';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { ExclamationCircle } from '../../../../icons/exclamation-circle-fill';
@@ -13,26 +14,26 @@ import { RetryBadge } from '../../../ui/Badge/RetryBadge';
 export type UploadInProgressIndicatorProps = {
   localId?: string;
   sourceUrl?: string;
+  totalBytes?: number | string | null;
 };
 
 export const FileUploadInProgressIndicator = ({
   localId,
   sourceUrl,
+  totalBytes,
 }: UploadInProgressIndicatorProps = {}) => {
   const {
     theme: {
       messageComposer: { fileUploadInProgressIndicator },
     },
   } = useTheme();
-  const { AttachmentUploadIndicator } = useComponentsContext();
 
   return (
-    <AttachmentUploadIndicator
+    <AttachmentFileUploadProgressIndicator
       containerStyle={[styles.activityIndicatorContainer, fileUploadInProgressIndicator.container]}
       localId={localId}
       sourceUrl={sourceUrl}
-      style={[styles.activityIndicator, fileUploadInProgressIndicator.indicator]}
-      testID='upload-progress-indicator'
+      totalBytes={totalBytes}
     />
   );
 };
@@ -116,14 +117,7 @@ export const ImageUploadInProgressIndicator = ({
 }: UploadInProgressIndicatorProps = {}) => {
   const { AttachmentUploadIndicator } = useComponentsContext();
 
-  return (
-    <AttachmentUploadIndicator
-      localId={localId}
-      sourceUrl={sourceUrl}
-      testID='upload-progress-indicator'
-      variant='overlay'
-    />
-  );
+  return <AttachmentUploadIndicator localId={localId} sourceUrl={sourceUrl} variant='overlay' />;
 };
 
 export type ImageUploadRetryIndicatorProps = {
@@ -227,8 +221,4 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  activityIndicator: {
-    alignItems: 'flex-start',
-    justifyContent: 'flex-start',
-  },
 });

package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx

@@ -64,7 +64,11 @@ export const AudioAttachmentUploadPreview = ({
   const renderIndicator = useMemo(() => {
     if (indicatorType === ProgressIndicatorTypes.IN_PROGRESS) {
       return (
-        <FileUploadInProgressIndicator localId={attachment.localMetadata.id} sourceUrl={assetUrl} />
+        <FileUploadInProgressIndicator
+          localId={attachment.localMetadata.id}
+          sourceUrl={assetUrl}
+          totalBytes={attachment.file_size}
+        />
       );
     }
     if (indicatorType === ProgressIndicatorTypes.RETRY) {
@@ -74,7 +78,7 @@ export const AudioAttachmentUploadPreview = ({
       return <FileUploadNotSupportedIndicator localMetadata={attachment.localMetadata} />;
     }
     return null;
-  }, [assetUrl, attachment.localMetadata, indicatorType, onRetryHandler]);
+  }, [assetUrl, attachment.file_size, attachment.localMetadata, indicatorType, onRetryHandler]);
 
   return (
     <View style={styles.wrapper} testID={'audio-attachment-upload-preview'}>

package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx

@@ -67,6 +67,7 @@ export const FileAttachmentUploadPreview = ({
         <FileUploadInProgressIndicator
           localId={attachment.localMetadata.id}
           sourceUrl={sourceUrl}
+          totalBytes={attachment.file_size}
         />
       );
     }
@@ -82,6 +83,7 @@ export const FileAttachmentUploadPreview = ({
     FileUploadNotSupportedIndicator,
     FileUploadRetryIndicator,
     attachment.localMetadata,
+    attachment.file_size,
     indicatorType,
     onRetryHandler,
     sourceUrl,