stream-chat 9.39.0 → 9.41.0

package/dist/types/channel.d.ts

@@ -1,3 +1,4 @@
+import type { AxiosRequestConfig } from 'axios';
 import { ChannelState } from './channel_state';
 import { CooldownTimer } from './CooldownTimer';
 import { MessageComposer } from './messageComposer';
@@ -81,8 +82,28 @@ export declare class Channel {
      */
     _sendMessage(message: Message, options?: SendMessageOptions): Promise<SendMessageAPIResponse>;
     sendMessage(message: Message, options?: SendMessageOptions): Promise<SendMessageAPIResponse>;
-    sendFile(uri: string | NodeJS.ReadableStream | Buffer | File, name?: string, contentType?: string, user?: UserResponse): Promise<import("./types").SendFileAPIResponse>;
-    sendImage(uri: string | NodeJS.ReadableStream | File, name?: string, contentType?: string, user?: UserResponse): Promise<import("./types").SendFileAPIResponse>;
+    /**
+     * Upload a file to this channel’s file endpoint (multipart). Forwards to the client’s `sendFile` implementation.
+     *
+     * @param uri File source: URL string, `File`, `Buffer`, or readable stream (Node).
+     * @param name File name sent in the multipart body.
+     * @param contentType MIME type; defaults are applied when omitted.
+     * @param user Optional user payload appended to the form as JSON.
+     * @param axiosRequestConfig Optional Axios per-request config, merged after upload defaults (e.g. `onUploadProgress`, `signal` from `AbortController`).
+     * @return Promise resolving to `{ file: string, ... }` with the CDN URL.
+     */
+    sendFile(uri: string | NodeJS.ReadableStream | Buffer | File, name?: string, contentType?: string, user?: UserResponse, axiosRequestConfig?: AxiosRequestConfig): Promise<import("./types").SendFileAPIResponse>;
+    /**
+     * Upload an image to this channel’s image endpoint (multipart). Uses the same transport as `sendFile`.
+     *
+     * @param uri Image source: URL string, `File`, or readable stream (Node). For `Buffer` uploads, use `sendFile` toward the channel file endpoint instead.
+     * @param name File name sent in the multipart body.
+     * @param contentType MIME type.
+     * @param user Optional user payload appended to the form as JSON.
+     * @param axiosRequestConfig Optional Axios per-request config, merged after upload defaults (e.g. `onUploadProgress`, `signal`).
+     * @return Promise resolving to `{ file: string, ... }` with the CDN URL.
+     */
+    sendImage(uri: string | NodeJS.ReadableStream | File, name?: string, contentType?: string, user?: UserResponse, axiosRequestConfig?: AxiosRequestConfig): Promise<import("./types").SendFileAPIResponse>;
     deleteFile(url: string): Promise<APIResponse>;
     deleteImage(url: string): Promise<APIResponse>;
     /**

package/dist/types/client.d.ts

@@ -400,7 +400,7 @@ export declare class StreamChat {
     post<T>(url: string, data?: unknown): Promise<T>;
     patch<T>(url: string, data?: unknown): Promise<T>;
     delete<T>(url: string, params?: AxiosRequestConfig['params']): Promise<T>;
-    sendFile(url: string, uri: string | NodeJS.ReadableStream | Buffer | File, name?: string, contentType?: string, user?: UserResponse): Promise<SendFileAPIResponse>;
+    sendFile(url: string, uri: string | NodeJS.ReadableStream | Buffer | File, name?: string, contentType?: string, user?: UserResponse, axiosRequestConfig?: AxiosRequestConfig): Promise<SendFileAPIResponse>;
     errorFromResponse(response: AxiosResponse<APIErrorResponse>): ErrorFromResponse<APIErrorResponse>;
     handleResponse<T>(response: AxiosResponse<T>): T;
     dispatchEvent: (event: Event) => void;
@@ -1113,6 +1113,9 @@ export declare class StreamChat {
     updateMessage(message: LocalMessage | Partial<MessageResponse>, partialUserOrUserId?: string | {
         id: string;
     }, options?: UpdateMessageOptions): Promise<UpdateMessageAPIResponse>;
+    _updateMessage(message: LocalMessage | Partial<MessageResponse>, partialUserOrUserId?: string | {
+        id: string;
+    }, options?: UpdateMessageOptions): Promise<UpdateMessageAPIResponse>;
     /**
      * partialUpdateMessage - Update the given message id while retaining additional properties
      *
@@ -1972,10 +1975,11 @@ export declare class StreamChat {
      * @param {string} [name] The name of the file
      * @param {string} [contentType] The content type of the file
      * @param {UserResponse} [user] Optional user information
+     * @param {AxiosRequestConfig} [axiosRequestConfig] Optional axios config (e.g. onUploadProgress for progress tracking)
      *
      * @return {Promise<SendFileAPIResponse>} Response containing the file URL
      */
-    uploadFile(uri: string | NodeJS.ReadableStream | Buffer | File, name?: string, contentType?: string, user?: UserResponse): Promise<SendFileAPIResponse>;
+    uploadFile(uri: string | NodeJS.ReadableStream | Buffer | File, name?: string, contentType?: string, user?: UserResponse, axiosRequestConfig?: AxiosRequestConfig): Promise<SendFileAPIResponse>;
     /**
      * uploadImage - Uploads an image to the configured storage (defaults to Stream CDN)
      *
@@ -1983,10 +1987,11 @@ export declare class StreamChat {
      * @param {string} [name] The name of the image
      * @param {string} [contentType] The content type of the image
      * @param {UserResponse} [user] Optional user information
+     * @param {AxiosRequestConfig} [axiosRequestConfig] Optional axios config (e.g. onUploadProgress for progress tracking)
      *
      * @return {Promise<SendFileAPIResponse>} Response containing the image URL
      */
-    uploadImage(uri: string | NodeJS.ReadableStream | File, name?: string, contentType?: string, user?: UserResponse): Promise<SendFileAPIResponse>;
+    uploadImage(uri: string | NodeJS.ReadableStream | File, name?: string, contentType?: string, user?: UserResponse, axiosRequestConfig?: AxiosRequestConfig): Promise<SendFileAPIResponse>;
     /**
      * deleteFile - Deletes a file from the configured storage
      *

package/dist/types/messageComposer/attachmentManager.d.ts

@@ -1,4 +1,4 @@
-import type { AttachmentManagerConfig, MinimumUploadRequestResult, UploadRequestFn } from './configuration';
+import type { AttachmentManagerConfig, MinimumUploadRequestResult, UploadRequestFn, UploadRequestOptions } from './configuration';
 import { AttachmentPostUploadMiddlewareExecutor, AttachmentPreUploadMiddlewareExecutor } from './middleware/attachmentManager';
 import { StateStore } from '../store';
 import type { AttachmentLoadingState, FileLike, FileReference, LocalAttachment, LocalUploadAttachment, UploadPermissionCheckResult } from './types';
@@ -57,7 +57,7 @@ export declare class AttachmentManager {
      * Method to perform the default upload behavior without checking for custom upload functions
      * to prevent recursive calls
      */
-    doDefaultUploadRequest: (fileLike: FileReference | FileLike) => Promise<{
+    doDefaultUploadRequest: (fileLike: FileReference | FileLike, options?: UploadRequestOptions) => Promise<{
         blocklist?: import("..").BlockListResponse;
         file: string;
         thumb_url?: string;
@@ -65,7 +65,7 @@ export declare class AttachmentManager {
     /**
      * todo: docs how to customize the image and file upload by overriding do
      */
-    doUploadRequest: (fileLike: FileReference | FileLike) => Promise<MinimumUploadRequestResult | {
+    doUploadRequest: (fileLike: FileReference | FileLike, options?: UploadRequestOptions) => Promise<MinimumUploadRequestResult | {
         blocklist?: import("..").BlockListResponse;
         file: string;
         thumb_url?: string;

package/dist/types/messageComposer/configuration/types.d.ts

@@ -5,7 +5,11 @@ export type MinimumUploadRequestResult = {
     file: string;
     thumb_url?: string;
 } & Partial<Record<string, unknown>>;
-export type UploadRequestFn = (fileLike: FileReference | FileLike) => Promise<MinimumUploadRequestResult>;
+/** Optional second argument to `UploadRequestFn`; integrators may call `onProgress` to report 0–100 or `undefined` when indeterminate. */
+export type UploadRequestOptions = {
+    onProgress?: (percent: number | undefined) => void;
+};
+export type UploadRequestFn = (fileLike: FileReference | FileLike, options?: UploadRequestOptions) => Promise<MinimumUploadRequestResult>;
 export type DraftsConfiguration = {
     enabled: boolean;
 };
@@ -36,6 +40,12 @@ export type AttachmentManagerConfig = {
     acceptedFiles: string[];
     /** Function that allows to customize the upload request. */
     doUploadRequest?: UploadRequestFn;
+    /**
+     * When true, the attachment manager sets `localMetadata.uploadProgress` and passes `options.onProgress`
+     * to `doUploadRequest` (built-in and custom). Set to false to disable progress tracking.
+     * @default true
+     */
+    trackUploadProgress: boolean;
 };
 export type LinkPreviewsManagerConfig = {
     /** Number of milliseconds to debounce firing the URL enrichment queries when typing. The default value is 1500(ms). */

package/dist/types/messageComposer/types.d.ts

@@ -69,6 +69,8 @@ export type LocalAttachmentUploadMetadata = {
     previewUri?: string;
     uploadState: AttachmentLoadingState;
     uploadPermissionCheck?: UploadPermissionCheckResult;
+    /** 0–100 while uploading when progress tracking is enabled; undefined otherwise or when indeterminate */
+    uploadProgress?: number;
 };
 export type LocalImageAttachmentUploadMetadata = LocalAttachmentUploadMetadata & {
     /**

package/dist/types/offline-support/offline_support_api.d.ts

@@ -271,6 +271,15 @@ export declare abstract class AbstractOfflineDB implements OfflineDBApi {
      * @returns {Promise<() => Promise<void>>}
      */
     abstract addPendingTask: OfflineDBApi['addPendingTask'];
+    /**
+     * @abstract
+     * Updates a pending task in the DB, given its ID.
+     * Will return the prepared queries for delayed execution (even if they are
+     * already executed).
+     * @param {DBUpdatePendingTaskType} options
+     * @returns {Promise<ExecuteBatchDBQueriesType>}
+     */
+    abstract updatePendingTask: OfflineDBApi['updatePendingTask'];
     /**
      * @abstract
      * Deletes a pending task from the DB, given its ID.
@@ -572,13 +581,26 @@ export declare abstract class AbstractOfflineDB implements OfflineDBApi {
      * @param error
      */
     private shouldSkipQueueingTask;
+    private mergeFailedMessageUpdateIntoPendingSendMessage;
+    private isPendingSendMessageTask;
+    private handleOfflineFailedUpdateMessagePendingTask;
+    /**
+     * Central ingress for persisting pending tasks. It either stores the task as-is
+     * or rewrites an existing pending `send-message` task for offline edits of failed messages.
+     */
+    handleAddPendingTask: ({ task }: {
+        task: PendingTask;
+    }) => Promise<void>;
     /**
      * Executes a task from the list of supported pending tasks. Currently supported pending tasks
      * are:
+     * - Updating a message
      * - Deleting a message
      * - Sending a reaction
      * - Removing a reaction
      * - Sending a message
+     * - Creating a draft
+     * - Deleting a draft
      * It will throw if we try to execute a pending task that is not supported.
      * @param task - The task we want to execute
      * @param isPendingTask - a control value telling us if it's an actual pending task being executed

package/dist/types/offline-support/types.d.ts

@@ -189,6 +189,15 @@ export type DBDeletePendingTaskType = {
     /** ID of the pending task. */
     id: number;
 };
+/**
+ * Update a pending task by ID.
+ */
+export type DBUpdatePendingTaskType = {
+    /** ID of the pending task. */
+    id: number;
+    /** The next task payload to persist. */
+    task: PendingTask;
+};
 /**
  * Options to delete a reaction from a message.
  */
@@ -309,6 +318,7 @@ export interface OfflineDBApi {
     addPendingTask: (task: PendingTask) => Promise<() => Promise<void>>;
     getPendingTasks: (conditions?: DBGetPendingTasksType) => Promise<PendingTask[]>;
     deleteDraft: (options: DBDeleteDraftType) => Promise<ExecuteBatchDBQueriesType>;
+    updatePendingTask: (options: DBUpdatePendingTaskType) => Promise<ExecuteBatchDBQueriesType>;
     deletePendingTask: (options: DBDeletePendingTaskType) => Promise<ExecuteBatchDBQueriesType>;
     deleteReaction: (options: DBDeleteReactionType) => Promise<ExecuteBatchDBQueriesType>;
     deleteMember: (options: DBDeleteMemberType) => Promise<ExecuteBatchDBQueriesType>;
@@ -326,6 +336,7 @@ export type OfflineDBState = {
     userId?: string;
 };
 export type PendingTaskTypes = {
+    updateMessage: 'update-message';
     deleteMessage: 'delete-message';
     deleteReaction: 'delete-reaction';
     sendReaction: 'send-reaction';
@@ -342,6 +353,9 @@ export type PendingTask = {
 } & ({
     payload: Parameters<Channel['sendReaction']>;
     type: PendingTaskTypes['sendReaction'];
+} | {
+    payload: Parameters<StreamChat['updateMessage']>;
+    type: PendingTaskTypes['updateMessage'];
 } | {
     payload: Parameters<StreamChat['deleteMessage']>;
     type: PendingTaskTypes['deleteMessage'];

package/dist/types/offline-support/util.d.ts

@@ -0,0 +1,11 @@
+import type { Attachment, LocalMessage, MessageResponse } from '../types';
+export declare const isLocalUrl: (value: string | undefined) => boolean;
+export declare const isAttachmentReplayable: (attachment: Attachment) => boolean;
+export declare const isMessageUpdateReplayable: (message: LocalMessage | Partial<MessageResponse>) => boolean;
+export declare const getPendingTaskChannelData: (cid?: string) => {
+    channelId?: undefined;
+    channelType?: undefined;
+} | {
+    channelId: string;
+    channelType: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat",
-  "version": "9.39.0",
+  "version": "9.41.0",
   "description": "JS SDK for the Stream Chat API",
   "homepage": "https://getstream.io/chat/",
   "author": {

package/src/channel.ts

@@ -1,3 +1,4 @@
+import type { AxiosRequestConfig } from 'axios';
 import { ChannelState } from './channel_state';
 import { CooldownTimer } from './CooldownTimer';
 import { MessageComposer } from './messageComposer';
@@ -245,11 +246,22 @@ export class Channel {
     return await this._sendMessage(message, options);
   }
 
+  /**
+   * Upload a file to this channel’s file endpoint (multipart). Forwards to the client’s `sendFile` implementation.
+   *
+   * @param uri File source: URL string, `File`, `Buffer`, or readable stream (Node).
+   * @param name File name sent in the multipart body.
+   * @param contentType MIME type; defaults are applied when omitted.
+   * @param user Optional user payload appended to the form as JSON.
+   * @param axiosRequestConfig Optional Axios per-request config, merged after upload defaults (e.g. `onUploadProgress`, `signal` from `AbortController`).
+   * @return Promise resolving to `{ file: string, ... }` with the CDN URL.
+   */
   sendFile(
     uri: string | NodeJS.ReadableStream | Buffer | File,
     name?: string,
     contentType?: string,
     user?: UserResponse,
+    axiosRequestConfig?: AxiosRequestConfig,
   ) {
     return this.getClient().sendFile(
       `${this._channelURL()}/file`,
@@ -257,14 +269,26 @@ export class Channel {
       name,
       contentType,
       user,
+      axiosRequestConfig,
     );
   }
 
+  /**
+   * Upload an image to this channel’s image endpoint (multipart). Uses the same transport as `sendFile`.
+   *
+   * @param uri Image source: URL string, `File`, or readable stream (Node). For `Buffer` uploads, use `sendFile` toward the channel file endpoint instead.
+   * @param name File name sent in the multipart body.
+   * @param contentType MIME type.
+   * @param user Optional user payload appended to the form as JSON.
+   * @param axiosRequestConfig Optional Axios per-request config, merged after upload defaults (e.g. `onUploadProgress`, `signal`).
+   * @return Promise resolving to `{ file: string, ... }` with the CDN URL.
+   */
   sendImage(
     uri: string | NodeJS.ReadableStream | File,
     name?: string,
     contentType?: string,
     user?: UserResponse,
+    axiosRequestConfig?: AxiosRequestConfig,
   ) {
     return this.getClient().sendFile(
       `${this._channelURL()}/image`,
@@ -272,6 +296,7 @@ export class Channel {
       name,
       contentType,
       user,
+      axiosRequestConfig,
     );
   }
 

package/src/client.ts

@@ -265,6 +265,7 @@ import { ReminderManager } from './reminders';
 import { StateStore } from './store';
 import type { MessageComposer } from './messageComposer';
 import type { AbstractOfflineDB } from './offline-support';
+import { getPendingTaskChannelData } from './offline-support/util';
 
 function isString(x: unknown): x is string {
   return typeof x === 'string' || x instanceof String;
@@ -1310,6 +1311,7 @@ export class StreamChat {
     name?: string,
     contentType?: string,
     user?: UserResponse,
+    axiosRequestConfig?: AxiosRequestConfig,
   ) {
     const data = addFileToFormData(uri, name, contentType || 'multipart/form-data');
     if (user != null) data.append('user', JSON.stringify(user));
@@ -1320,6 +1322,7 @@ export class StreamChat {
         timeout: 0,
         maxContentLength: Infinity,
         maxBodyLength: Infinity,
+        ...axiosRequestConfig,
       },
     });
   }
@@ -3114,6 +3117,38 @@ export class StreamChat {
       throw Error('Please specify the message.id when calling updateMessage');
     }
 
+    const messageId = message.id as string;
+
+    try {
+      if (this.offlineDb) {
+        return await this.offlineDb.queueTask<UpdateMessageAPIResponse>({
+          task: {
+            ...getPendingTaskChannelData(message.cid),
+            messageId,
+            payload: [message, partialUserOrUserId, options],
+            type: 'update-message',
+          },
+        });
+      }
+    } catch (error) {
+      this.logger('error', `offlineDb:updateMessage`, {
+        tags: ['channel', 'offlineDb'],
+        error,
+      });
+    }
+
+    return await this._updateMessage(message, partialUserOrUserId, options);
+  }
+
+  async _updateMessage(
+    message: LocalMessage | Partial<MessageResponse>,
+    partialUserOrUserId?: string | { id: string },
+    options?: UpdateMessageOptions,
+  ) {
+    if (!message.id) {
+      throw Error('Please specify the message.id when calling updateMessage');
+    }
+
     // should not include user object
     const payload = toUpdatedMessagePayload(message);
 
@@ -4833,6 +4868,7 @@ export class StreamChat {
    * @param {string} [name] The name of the file
    * @param {string} [contentType] The content type of the file
    * @param {UserResponse} [user] Optional user information
+   * @param {AxiosRequestConfig} [axiosRequestConfig] Optional axios config (e.g. onUploadProgress for progress tracking)
    *
    * @return {Promise<SendFileAPIResponse>} Response containing the file URL
    */
@@ -4841,8 +4877,16 @@ export class StreamChat {
     name?: string,
     contentType?: string,
     user?: UserResponse,
+    axiosRequestConfig?: AxiosRequestConfig,
   ) {
-    return this.sendFile(`${this.baseURL}/uploads/file`, uri, name, contentType, user);
+    return this.sendFile(
+      `${this.baseURL}/uploads/file`,
+      uri,
+      name,
+      contentType,
+      user,
+      axiosRequestConfig,
+    );
   }
 
   /**
@@ -4852,6 +4896,7 @@ export class StreamChat {
    * @param {string} [name] The name of the image
    * @param {string} [contentType] The content type of the image
    * @param {UserResponse} [user] Optional user information
+   * @param {AxiosRequestConfig} [axiosRequestConfig] Optional axios config (e.g. onUploadProgress for progress tracking)
    *
    * @return {Promise<SendFileAPIResponse>} Response containing the image URL
    */
@@ -4860,8 +4905,16 @@ export class StreamChat {
     name?: string,
     contentType?: string,
     user?: UserResponse,
+    axiosRequestConfig?: AxiosRequestConfig,
   ) {
-    return this.sendFile(`${this.baseURL}/uploads/image`, uri, name, contentType, user);
+    return this.sendFile(
+      `${this.baseURL}/uploads/image`,
+      uri,
+      name,
+      contentType,
+      user,
+      axiosRequestConfig,
+    );
   }
 
   /**

package/src/messageComposer/attachmentManager.ts

@@ -2,6 +2,7 @@ import type {
   AttachmentManagerConfig,
   MinimumUploadRequestResult,
   UploadRequestFn,
+  UploadRequestOptions,
 } from './configuration';
 import { isLocalImageAttachment, isUploadedAttachment } from './attachmentIdentity';
 import {
@@ -445,12 +446,31 @@ export class AttachmentManager {
    * Method to perform the default upload behavior without checking for custom upload functions
    * to prevent recursive calls
    */
-  doDefaultUploadRequest = async (fileLike: FileReference | FileLike) => {
+  doDefaultUploadRequest = async (
+    fileLike: FileReference | FileLike,
+    options?: UploadRequestOptions,
+  ) => {
+    const progressHandler = options?.onProgress
+      ? (progressEvent: {
+          loaded: number;
+          total?: number;
+          lengthComputable?: boolean;
+        }) => {
+          const percent =
+            progressEvent.lengthComputable && progressEvent.total
+              ? Math.round((progressEvent.loaded * 100) / progressEvent.total)
+              : undefined;
+          options.onProgress?.(percent);
+        }
+      : undefined;
+
     if (isFileReference(fileLike)) {
       return this.channel[isImageFile(fileLike) ? 'sendImage' : 'sendFile'](
         fileLike.uri,
         fileLike.name,
         fileLike.type,
+        undefined,
+        progressHandler ? { onUploadProgress: progressHandler } : undefined,
       );
     }
 
@@ -463,8 +483,15 @@ export class AttachmentManager {
         });
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { duration, ...result } =
-      await this.channel[isImageFile(fileLike) ? 'sendImage' : 'sendFile'](file);
+    const { duration, ...result } = await this.channel[
+      isImageFile(fileLike) ? 'sendImage' : 'sendFile'
+    ](
+      file,
+      undefined,
+      undefined,
+      undefined,
+      progressHandler ? { onUploadProgress: progressHandler } : undefined,
+    );
     return result;
   };
 
@@ -472,13 +499,16 @@ export class AttachmentManager {
    * todo: docs how to customize the image and file upload by overriding do
    */
 
-  doUploadRequest = async (fileLike: FileReference | FileLike) => {
+  doUploadRequest = async (
+    fileLike: FileReference | FileLike,
+    options?: UploadRequestOptions,
+  ) => {
     const customUploadFn = this.config.doUploadRequest;
     if (customUploadFn) {
-      return await customUploadFn(fileLike);
+      return await customUploadFn(fileLike, options);
     }
 
-    return this.doDefaultUploadRequest(fileLike);
+    return this.doDefaultUploadRequest(fileLike, options);
   };
 
   // @deprecated use attachmentManager.uploadFile(file)
@@ -507,19 +537,37 @@ export class AttachmentManager {
       return localAttachment;
     }
 
-    this.upsertAttachments([
-      {
-        ...attachment,
-        localMetadata: {
-          ...attachment.localMetadata,
-          uploadState: 'uploading',
-        },
+    const shouldTrackProgress = this.config.trackUploadProgress;
+    const uploadingAttachment: LocalUploadAttachment = {
+      ...attachment,
+      localMetadata: {
+        ...attachment.localMetadata,
+        uploadState: 'uploading',
+        ...(shouldTrackProgress && { uploadProgress: 0 }),
       },
-    ]);
+    };
+    this.upsertAttachments([uploadingAttachment]);
+
+    const uploadOptions = shouldTrackProgress
+      ? {
+          onProgress: (percent: number | undefined) => {
+            this.updateAttachment({
+              ...uploadingAttachment,
+              localMetadata: {
+                ...uploadingAttachment.localMetadata,
+                uploadProgress: percent,
+              },
+            });
+          },
+        }
+      : undefined;
 
     let response: MinimumUploadRequestResult;
     try {
-      response = await this.doUploadRequest(localAttachment.localMetadata.file);
+      response = await this.doUploadRequest(
+        localAttachment.localMetadata.file,
+        uploadOptions,
+      );
     } catch (error) {
       const reason = error instanceof Error ? error.message : 'unknown error';
       const failedAttachment: LocalUploadAttachment = {
@@ -527,6 +575,7 @@ export class AttachmentManager {
         localMetadata: {
           ...attachment.localMetadata,
           uploadState: 'failed',
+          uploadProgress: undefined,
         },
       };
 
@@ -561,6 +610,7 @@ export class AttachmentManager {
       localMetadata: {
         ...attachment.localMetadata,
         uploadState: 'finished',
+        uploadProgress: undefined,
       },
     };
 
@@ -605,19 +655,35 @@ export class AttachmentManager {
       return preUpload.state.attachment;
     }
 
+    const shouldTrackProgress = this.config.trackUploadProgress;
     attachment = {
       ...attachment,
       localMetadata: {
         ...attachment.localMetadata,
         uploadState: 'uploading',
+        ...(shouldTrackProgress && { uploadProgress: 0 }),
       },
     };
     this.upsertAttachments([attachment]);
 
+    const uploadOptions = shouldTrackProgress
+      ? {
+          onProgress: (percent: number | undefined) => {
+            this.updateAttachment({
+              ...attachment,
+              localMetadata: {
+                ...attachment.localMetadata,
+                uploadProgress: percent,
+              },
+            });
+          },
+        }
+      : undefined;
+
     let response: MinimumUploadRequestResult | undefined;
     let error: Error | undefined;
     try {
-      response = await this.doUploadRequest(file);
+      response = await this.doUploadRequest(file, uploadOptions);
     } catch (err) {
       error = err instanceof Error ? err : undefined;
     }
@@ -630,6 +696,7 @@ export class AttachmentManager {
           localMetadata: {
             ...attachment.localMetadata,
             uploadState: error ? 'failed' : 'finished',
+            uploadProgress: undefined,
           },
         },
         error,

package/src/messageComposer/configuration/configuration.ts

@@ -31,6 +31,7 @@ export const DEFAULT_ATTACHMENT_MANAGER_CONFIG: AttachmentManagerConfig = {
   acceptedFiles: [], // an empty array means all files are accepted
   fileUploadFilter: () => true,
   maxNumberOfFilesPerMessage: API_MAX_FILES_ALLOWED_PER_MESSAGE,
+  trackUploadProgress: true,
 };
 
 export const DEFAULT_TEXT_COMPOSER_CONFIG: TextComposerConfig = {

package/src/messageComposer/configuration/types.ts

@@ -6,8 +6,14 @@ export type MinimumUploadRequestResult = { file: string; thumb_url?: string } &
   Record<string, unknown>
 >;
 
+/** Optional second argument to `UploadRequestFn`; integrators may call `onProgress` to report 0–100 or `undefined` when indeterminate. */
+export type UploadRequestOptions = {
+  onProgress?: (percent: number | undefined) => void;
+};
+
 export type UploadRequestFn = (
   fileLike: FileReference | FileLike,
+  options?: UploadRequestOptions,
 ) => Promise<MinimumUploadRequestResult>;
 
 export type DraftsConfiguration = {
@@ -43,6 +49,12 @@ export type AttachmentManagerConfig = {
   acceptedFiles: string[];
   /** Function that allows to customize the upload request. */
   doUploadRequest?: UploadRequestFn;
+  /**
+   * When true, the attachment manager sets `localMetadata.uploadProgress` and passes `options.onProgress`
+   * to `doUploadRequest` (built-in and custom). Set to false to disable progress tracking.
+   * @default true
+   */
+  trackUploadProgress: boolean;
 };
 
 export type LinkPreviewsManagerConfig = {

package/src/messageComposer/types.ts

@@ -120,6 +120,8 @@ export type LocalAttachmentUploadMetadata = {
   previewUri?: string;
   uploadState: AttachmentLoadingState;
   uploadPermissionCheck?: UploadPermissionCheckResult; // added new
+  /** 0–100 while uploading when progress tracking is enabled; undefined otherwise or when indeterminate */
+  uploadProgress?: number;
 };
 
 export type LocalImageAttachmentUploadMetadata = LocalAttachmentUploadMetadata & {