stream-chat 9.41.0 → 9.42.0

package/dist/types/channel.d.ts

@@ -748,6 +748,7 @@ export declare class Channel {
     _checkInitialized(): void;
     _initializeState(state: ChannelAPIResponse, messageSetToAddToIfDoesNotExist?: MessageSetType): {
         messageSet: import("./types").MessageSet;
+        filteredMessageIds: string[];
     };
     _extendEventWithOwnReactions(event: Event): void;
     _hydrateMembers({ members, overrideCurrentState, }: {

package/dist/types/channel_state.d.ts

@@ -67,6 +67,7 @@ export declare class ChannelState {
      */
     addMessageSorted(newMessage: MessageResponse | LocalMessage, timestampChanged?: boolean, addIfDoesNotExist?: boolean, messageSetToAddToIfDoesNotExist?: MessageSetType): {
         messageSet: MessageSet;
+        filteredMessageIds: string[];
     };
     /**
      * Takes the message object, parses the dates, sets `__html`
@@ -87,6 +88,7 @@ export declare class ChannelState {
      */
     addMessagesSorted(newMessages: (MessageResponse | LocalMessage)[], timestampChanged?: boolean, initializing?: boolean, addIfDoesNotExist?: boolean, messageSetToAddToIfDoesNotExist?: MessageSetType): {
         messageSet: MessageSet;
+        filteredMessageIds: string[];
     };
     /**
      * addPinnedMessages - adds messages in pinnedMessages property

package/dist/types/client.d.ts

@@ -3,6 +3,7 @@ import type WebSocket from 'isomorphic-ws';
 import { Channel } from './channel';
 import { ClientState } from './client_state';
 import { StableWSConnection } from './connection';
+import { UploadManager } from './uploadManager';
 import { TokenManager } from './token_manager';
 import { WSConnectionFallback } from './connection_fallback';
 import { Campaign } from './campaign';
@@ -44,6 +45,10 @@ export type MessageComposerSetupState = {
 export declare class StreamChat {
     private static _instance?;
     messageDeliveryReporter: MessageDeliveryReporter;
+    /**
+     * @internal
+     */
+    uploadManager: UploadManager;
     _user?: OwnUserResponse | UserResponse;
     appSettingsPromise?: Promise<AppSettingsAPIResponse>;
     activeChannels: {

package/dist/types/index.d.ts

@@ -28,6 +28,7 @@ export type { ThreadState, ThreadReadState, ThreadRepliesPagination, ThreadUserR
 export * from './thread_manager';
 export * from './token_manager';
 export * from './types';
+export * from './uploadManager';
 export * from './channel_manager';
 export * from './offline-support';
 export * from './LiveLocationManager';

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

@@ -21,7 +21,7 @@ export declare class LocationComposer {
     readonly composer: MessageComposer;
     private _deviceId;
     constructor({ composer, message }: LocationComposerOptions);
-    get config(): import("..").LocationComposerConfig;
+    get config(): import("./configuration").LocationComposerConfig;
     get deviceId(): string;
     get location(): StaticLocationPayload | LiveLocationPreview | null;
     get validLocation(): StaticLocationPayload | LiveLocationPayload | null;

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

@@ -73,4 +73,5 @@ export declare class AttachmentManager {
     uploadAttachment: (attachment: LocalUploadAttachment) => Promise<LocalUploadAttachment | undefined>;
     uploadFile: (file: FileReference | FileLike) => Promise<LocalUploadAttachment>;
     uploadFiles: (files: FileReference[] | FileList | FileLike[]) => Promise<LocalUploadAttachment[] | undefined>;
+    private upload;
 }

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

@@ -5,9 +5,14 @@ export type MinimumUploadRequestResult = {
     file: string;
     thumb_url?: string;
 } & Partial<Record<string, unknown>>;
-/** Optional second argument to `UploadRequestFn`; integrators may call `onProgress` to report 0–100 or `undefined` when indeterminate. */
+/**
+ * Optional second argument to `UploadRequestFn`.
+ * - Call `onProgress` to report 0–100 or `undefined` when indeterminate.
+ * - Forward `abortSignal` to your upload implementation to cancel the upload if the user deletes the attachment while it's uploading.
+ */
 export type UploadRequestOptions = {
     onProgress?: (percent: number | undefined) => void;
+    abortSignal?: AbortSignal;
 };
 export type UploadRequestFn = (fileLike: FileReference | FileLike, options?: UploadRequestOptions) => Promise<MinimumUploadRequestResult>;
 export type DraftsConfiguration = {

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

@@ -13,5 +13,5 @@ export declare const getExtensionFromMimeType: (mimeType: string) => string | un
 export declare const readFileAsArrayBuffer: (file: File) => Promise<ArrayBuffer>;
 export declare const generateFileName: (mimeType: string) => string;
 export declare const isImageFile: (fileLike: FileReference | FileLike) => boolean;
-export declare const getAttachmentTypeFromMimeType: (mimeType: string) => "file" | "audio" | "video" | "image";
+export declare const getAttachmentTypeFromMimeType: (mimeType: string) => "file" | "image" | "audio" | "video";
 export declare const ensureIsLocalAttachment: (attachment: Attachment | LocalAttachment) => LocalAttachment | null;

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

@@ -61,15 +61,15 @@ export declare class MessageComposer extends WithSubscriptions {
     locationComposer: LocationComposer;
     customDataManager: CustomDataManager;
     constructor({ composition, config, compositionContext, client, }: MessageComposerOptions);
-    static evaluateContextType(compositionContext: CompositionContext): "channel" | "message" | "thread" | "legacy_thread";
+    static evaluateContextType(compositionContext: CompositionContext): "message" | "channel" | "thread" | "legacy_thread";
     static constructTag(compositionContext: CompositionContext): `${ReturnType<typeof MessageComposer.evaluateContextType>}_${string}`;
     static generateId: typeof generateUUIDv4;
     get config(): MessageComposerConfig;
     get editedMessage(): LocalMessage | undefined;
     set editedMessage(editedMessage: LocalMessage | undefined);
     setEditedMessage: (editedMessage: LocalMessage | null | undefined) => void;
-    get contextType(): "channel" | "message" | "thread" | "legacy_thread";
-    get tag(): `channel_${string}` | `message_${string}` | `thread_${string}` | `legacy_thread_${string}`;
+    get contextType(): "message" | "channel" | "thread" | "legacy_thread";
+    get tag(): `message_${string}` | `channel_${string}` | `thread_${string}` | `legacy_thread_${string}`;
     get threadId(): string | null;
     get client(): StreamChat;
     get id(): string;
@@ -111,7 +111,7 @@ export declare class MessageComposer extends WithSubscriptions {
     clear: () => void;
     restore: () => void;
     compose: () => Promise<MessageComposerMiddlewareValue["state"] | undefined>;
-    composeDraft: () => Promise<import("..").MessageDraftComposerMiddlewareValueState | undefined>;
+    composeDraft: () => Promise<import("./middleware").MessageDraftComposerMiddlewareValueState | undefined>;
     createDraft: () => Promise<void>;
     deleteDraft: () => Promise<void>;
     getDraft: () => Promise<void>;

package/dist/types/messageComposer/middleware/textComposer/commands.d.ts

@@ -21,12 +21,12 @@ export declare class CommandSearchSource extends BaseSearchSourceSync<CommandSug
     };
     query(searchQuery: string): {
         items: {
-            id: "all" | "giphy" | "mute" | "unmute" | "ban" | "fun_set" | "moderation_set" | "unban";
+            id: "all" | "giphy" | "ban" | "fun_set" | "moderation_set" | "mute" | "unban" | "unmute";
             created_at?: string | undefined;
             updated_at?: string | undefined;
             args?: string;
             description?: string;
-            name: "all" | "giphy" | "mute" | "unmute" | "ban" | "fun_set" | "moderation_set" | "unban";
+            name: "all" | "giphy" | "ban" | "fun_set" | "moderation_set" | "mute" | "unban" | "unmute";
             set?: import("../../..").CommandVariants;
         }[];
         next: null;

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

@@ -20,7 +20,7 @@ export declare class PollComposer {
     get id(): string;
     get max_votes_allowed(): string;
     get name(): string;
-    get options(): import("..").PollComposerOption[];
+    get options(): import("./middleware").PollComposerOption[];
     get user_id(): string | undefined;
     get voting_visibility(): VotingVisibility | undefined;
     get canCreatePoll(): boolean;
@@ -32,5 +32,5 @@ export declare class PollComposer {
      */
     updateFields: (data: UpdateFieldsData, injectedFieldErrors?: PollComposerFieldErrors) => Promise<void>;
     handleFieldBlur: (field: keyof PollComposerState["data"]) => Promise<void>;
-    compose: () => Promise<import("..").PollComposerCompositionMiddlewareValueState | undefined>;
+    compose: () => Promise<import("./middleware").PollComposerCompositionMiddlewareValueState | undefined>;
 }

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

@@ -17,7 +17,7 @@ export declare class TextComposer {
     middlewareExecutor: TextComposerMiddlewareExecutor;
     constructor({ composer, message }: TextComposerOptions);
     get channel(): import("..").Channel;
-    get config(): import("..").TextComposerConfig;
+    get config(): import("./configuration").TextComposerConfig;
     get enabled(): boolean;
     set enabled(enabled: boolean);
     get defaultValue(): string | undefined;
@@ -31,7 +31,7 @@ export declare class TextComposer {
     get command(): CommandResponse | null | undefined;
     get mentionedUsers(): UserResponse[];
     get selection(): TextSelection;
-    get suggestions(): Suggestions<import("..").Suggestion> | undefined;
+    get suggestions(): Suggestions<import("./middleware").Suggestion> | undefined;
     get text(): string;
     get textIsEmpty(): boolean;
     initState: ({ message }?: {

package/dist/types/uploadManager.d.ts

@@ -0,0 +1,45 @@
+import type { StreamChat } from './client';
+import { StateStore } from './store';
+import type { AttachmentManager } from '.';
+export type UploadRecord = {
+    id: string;
+    uploadProgress?: number;
+};
+export type UploadManagerState = {
+    uploads: Record<string, UploadRecord>;
+};
+/**
+ * @internal
+ */
+export declare class UploadManager {
+    private readonly client;
+    readonly state: StateStore<UploadManagerState>;
+    private inFlightUploads;
+    constructor(client: StreamChat);
+    private resolveAttachmentManager;
+    get uploads(): Record<string, UploadRecord>;
+    getUpload: (id: string) => UploadRecord;
+    /**
+     * Clears all upload records.
+     * Invoked when the user disconnects so a later session does not inherit stale upload state.
+     * Aborts every in-flight upload request via its `UploadRequestOptions.abortSignal`.
+     */
+    reset: () => void;
+    /**
+     * Removes the upload record for `id` if present.
+     * If an upload is still in progress, aborts its `UploadRequestOptions.abortSignal`.
+     */
+    deleteUploadRecord: (id: string) => void;
+    /**
+     * Starts an upload for `id`, or returns the existing in-flight promise if one is already running.
+     * Uses {@link StreamChat.channel}(`channelCid`) → `messageComposer.attachmentManager.doUploadRequest`.
+     * Resolves with that result; rejects if the upload rejects (the record is removed from state either way).
+     */
+    upload: ({ id, channelCid, file, }: {
+        id: string;
+        channelCid: string;
+        file: Parameters<typeof AttachmentManager.prototype.doUploadRequest>[0];
+    }) => ReturnType<typeof AttachmentManager.prototype.doUploadRequest>;
+    private upsertUpload;
+    private updateUpload;
+}

package/dist/types/utils.d.ts

@@ -89,8 +89,6 @@ export declare const toDeletedMessage: ({ message, deletedAt, hardDelete, }: {
     deleted_at: Date | null;
     text?: string | undefined;
     user_id?: string | undefined;
-    user?: (UserResponse | null) | undefined;
-    channel?: import("./types").ChannelResponse | undefined;
     command?: string | undefined;
     mentioned_users?: UserResponse[] | undefined;
     latest_reactions?: import("./types").ReactionResponse[] | undefined;
@@ -103,9 +101,10 @@ export declare const toDeletedMessage: ({ message, deletedAt, hardDelete, }: {
         language: import("./types").TranslationLanguages;
     }) | undefined;
     html?: string | undefined;
-    parent_id?: string | undefined;
+    user?: (UserResponse | null) | undefined;
     id: string;
     mml?: string | undefined;
+    parent_id?: string | undefined;
     pin_expires?: string | null | undefined;
     pinned?: boolean | undefined;
     poll_id?: string | undefined;
@@ -115,6 +114,7 @@ export declare const toDeletedMessage: ({ message, deletedAt, hardDelete, }: {
     silent?: boolean | undefined;
     args?: string | undefined;
     before_message_send_failed?: boolean | undefined;
+    channel?: import("./types").ChannelResponse | undefined;
     cid?: string | undefined;
     command_info?: {
         name?: string;
@@ -223,6 +223,7 @@ type MessagePaginationUpdatedParams = {
     parentSet: MessageSet;
     requestedPageSize: number;
     returnedPage: MessageResponse[];
+    filteredReturnedPage: MessageResponse[];
     logger?: Logger;
     messagePaginationOptions?: MessagePaginationOptions;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat",
-  "version": "9.41.0",
+  "version": "9.42.0",
   "description": "JS SDK for the Stream Chat API",
   "homepage": "https://getstream.io/chat/",
   "author": {
@@ -51,7 +51,7 @@
   "dependencies": {
     "@types/jsonwebtoken": "^9.0.8",
     "@types/ws": "^8.5.14",
-    "axios": "^1.12.2",
+    "axios": "^1.15.1",
     "base64-js": "^1.5.1",
     "form-data": "^4.0.4",
     "isomorphic-ws": "^5.0.0",

package/src/channel.ts

@@ -1581,7 +1581,10 @@ export class Channel {
     }
 
     // add any messages to our channel state
-    const { messageSet } = this._initializeState(state, messageSetToAddToIfDoesNotExist);
+    const { messageSet, filteredMessageIds } = this._initializeState(
+      state,
+      messageSetToAddToIfDoesNotExist,
+    );
     messageSet.pagination = {
       ...messageSet.pagination,
       ...messageSetPagination({
@@ -1590,6 +1593,9 @@ export class Channel {
         requestedPageSize:
           options?.messages?.limit ?? DEFAULT_QUERY_CHANNEL_MESSAGE_LIST_PAGE_SIZE,
         returnedPage: state.messages,
+        filteredReturnedPage: state.messages.filter(
+          (m) => !filteredMessageIds.includes(m.id),
+        ),
         logger: this.getClient().logger,
       }),
     };
@@ -2368,7 +2374,7 @@ export class Channel {
     if (!this.state.messages) {
       this.state.initMessages();
     }
-    const { messageSet } = this.state.addMessagesSorted(
+    const { messageSet, filteredMessageIds } = this.state.addMessagesSorted(
       messages,
       false,
       true,
@@ -2434,6 +2440,7 @@ export class Channel {
 
     return {
       messageSet,
+      filteredMessageIds,
     };
   }
 

package/src/channel_state.ts

@@ -217,9 +217,12 @@ export class ChannelState {
       messageSetToAddToIfDoesNotExist,
     );
 
+    const filteredMessageIds: string[] = [];
+
     for (let i = 0; i < messagesToAdd.length; i += 1) {
       const isFromShadowBannedUser = messagesToAdd[i].shadowed;
-      if (isFromShadowBannedUser) {
+      if (isFromShadowBannedUser && addIfDoesNotExist) {
+        filteredMessageIds.push(messagesToAdd[i].id);
         continue;
       }
       // If message is already formatted we can skip the tasks below
@@ -306,6 +309,7 @@ export class ChannelState {
 
     return {
       messageSet: this.messageSets[targetMessageSetIndex],
+      filteredMessageIds,
     };
   }
 

package/src/client.ts

@@ -9,6 +9,7 @@ import type WebSocket from 'isomorphic-ws';
 import { Channel } from './channel';
 import { ClientState } from './client_state';
 import { StableWSConnection } from './connection';
+import { UploadManager } from './uploadManager';
 import { CheckSignature, DevToken, JWTUserToken } from './signing';
 import { TokenManager } from './token_manager';
 import { WSConnectionFallback } from './connection_fallback';
@@ -296,6 +297,10 @@ export type MessageComposerSetupState = {
 export class StreamChat {
   private static _instance?: unknown | StreamChat; // type is undefined|StreamChat, unknown is due to TS limitations with statics
   messageDeliveryReporter: MessageDeliveryReporter;
+  /**
+   * @internal
+   */
+  uploadManager: UploadManager;
   _user?: OwnUserResponse | UserResponse;
   appSettingsPromise?: Promise<AppSettingsAPIResponse>;
   activeChannels: {
@@ -401,6 +406,7 @@ export class StreamChat {
     this.moderation = new Moderation(this);
 
     this.notifications = options?.notifications ?? new NotificationManager();
+    this.uploadManager = new UploadManager(this);
 
     // set the secret
     if (secretOrOptions && isString(secretOrOptions)) {
@@ -1020,6 +1026,7 @@ export class StreamChat {
     this.state = new ClientState({ client: this });
     // reset thread manager
     this.threads.resetState();
+    this.uploadManager.reset();
 
     // Since we wipe all user data already, we should reset token manager as well
     closePromise
@@ -2040,12 +2047,17 @@ export class StreamChat {
       c.push_preferences = channelState.push_preferences;
 
       let updatedMessagesSet;
+      let filteredMessageIds: string[] = [];
       if (skipInitialization === undefined) {
-        const { messageSet } = c._initializeState(channelState, 'latest');
+        const { messageSet, filteredMessageIds: _filteredMessageIds } =
+          c._initializeState(channelState, 'latest');
+        filteredMessageIds = _filteredMessageIds;
         updatedMessagesSet = messageSet;
       } else if (!skipInitialization.includes(channelState.channel.id)) {
         c.state.clearMessages();
-        const { messageSet } = c._initializeState(channelState, 'latest');
+        const { messageSet, filteredMessageIds: _filteredMessageIds } =
+          c._initializeState(channelState, 'latest');
+        filteredMessageIds = _filteredMessageIds;
         updatedMessagesSet = messageSet;
       }
 
@@ -2058,6 +2070,9 @@ export class StreamChat {
               queryChannelsOptions?.message_limit ||
               DEFAULT_QUERY_CHANNELS_MESSAGE_LIST_PAGE_SIZE,
             returnedPage: channelState.messages,
+            filteredReturnedPage: channelState.messages.filter(
+              (m) => !filteredMessageIds.includes(m.id),
+            ),
             logger: this.logger,
           }),
         };

package/src/index.ts

@@ -33,6 +33,7 @@ export type {
 export * from './thread_manager';
 export * from './token_manager';
 export * from './types';
+export * from './uploadManager';
 export * from './channel_manager';
 export * from './offline-support';
 export * from './LiveLocationManager';

package/src/messageComposer/attachmentManager.ts

@@ -237,12 +237,12 @@ export class AttachmentManager {
         return attachments;
       }
     }
-    return null;
+    return stateAttachments;
   };
 
   updateAttachment = (attachmentToUpdate: LocalAttachment) => {
     const updatedAttachments = this.prepareAttachmentUpdate(attachmentToUpdate);
-    if (updatedAttachments) {
+    if (updatedAttachments && updatedAttachments !== this.attachments) {
       this.state.partialNext({ attachments: updatedAttachments });
     }
   };
@@ -253,16 +253,17 @@ export class AttachmentManager {
     let hasUpdates = false;
     attachmentsToUpsert.forEach((attachment) => {
       const updatedAttachments = this.prepareAttachmentUpdate(attachment);
-      if (updatedAttachments) {
-        attachments = updatedAttachments;
-        hasUpdates = true;
-      } else {
+      if (updatedAttachments === null) {
         const localAttachment = ensureIsLocalAttachment(attachment);
         if (localAttachment) {
           attachments.push(localAttachment);
           hasUpdates = true;
         }
+      } else if (updatedAttachments !== this.attachments) {
+        attachments = updatedAttachments;
+        hasUpdates = true;
       }
+      // else: id exists and merge was a no-op (`prepareAttachmentUpdate` returns current state)
     });
     if (hasUpdates) {
       this.state.partialNext({ attachments });
@@ -270,11 +271,17 @@ export class AttachmentManager {
   };
 
   removeAttachments = (localAttachmentIds: string[]) => {
+    if (!localAttachmentIds.length) return;
+
     this.state.partialNext({
       attachments: this.attachments.filter(
         (attachment) => !localAttachmentIds.includes(attachment.localMetadata?.id),
       ),
     });
+
+    for (const id of localAttachmentIds) {
+      this.client.uploadManager.deleteUploadRecord(id);
+    }
   };
 
   getUploadConfigCheck = async (
@@ -464,13 +471,21 @@ export class AttachmentManager {
         }
       : undefined;
 
+    const axiosUploadConfig =
+      progressHandler || options?.abortSignal
+        ? {
+            ...(progressHandler ? { onUploadProgress: progressHandler } : {}),
+            ...(options?.abortSignal ? { signal: options.abortSignal } : {}),
+          }
+        : undefined;
+
     if (isFileReference(fileLike)) {
       return this.channel[isImageFile(fileLike) ? 'sendImage' : 'sendFile'](
         fileLike.uri,
         fileLike.name,
         fileLike.type,
         undefined,
-        progressHandler ? { onUploadProgress: progressHandler } : undefined,
+        axiosUploadConfig,
       );
     }
 
@@ -485,13 +500,7 @@ export class AttachmentManager {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { duration, ...result } = await this.channel[
       isImageFile(fileLike) ? 'sendImage' : 'sendFile'
-    ](
-      file,
-      undefined,
-      undefined,
-      undefined,
-      progressHandler ? { onUploadProgress: progressHandler } : undefined,
-    );
+    ](file, undefined, undefined, undefined, axiosUploadConfig);
     return result;
   };
 
@@ -537,37 +546,9 @@ export class AttachmentManager {
       return localAttachment;
     }
 
-    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,
-        uploadOptions,
-      );
+      response = await this.upload(attachment);
     } catch (error) {
       const reason = error instanceof Error ? error.message : 'unknown error';
       const failedAttachment: LocalUploadAttachment = {
@@ -655,35 +636,10 @@ 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, uploadOptions);
+      response = await this.upload(attachment);
     } catch (err) {
       error = err instanceof Error ? err : undefined;
     }
@@ -725,4 +681,44 @@ export class AttachmentManager {
       iterableFiles.slice(0, this.availableUploadSlots).map(this.uploadFile),
     );
   };
+
+  private upload(attachment: LocalUploadAttachment) {
+    const localId = attachment.localMetadata.id;
+
+    this.upsertAttachments([
+      {
+        ...attachment,
+        localMetadata: {
+          ...attachment.localMetadata,
+          uploadState: 'uploading',
+          uploadProgress: this.config.trackUploadProgress ? 0 : undefined,
+        },
+      },
+    ]);
+
+    const unsubscribe = this.client.uploadManager.state.subscribeWithSelector(
+      (s) => ({ upload: s.uploads[localId] }),
+      ({ upload: nextUpload }) => {
+        if (!nextUpload) return;
+        this.updateAttachment({
+          ...attachment,
+          localMetadata: {
+            ...attachment.localMetadata,
+            uploadState: 'uploading',
+            uploadProgress: nextUpload.uploadProgress,
+          },
+        });
+      },
+    );
+
+    return this.client.uploadManager
+      .upload({
+        id: localId,
+        channelCid: this.channel.cid,
+        file: attachment.localMetadata.file,
+      })
+      .finally(() => {
+        unsubscribe();
+      });
+  }
 }

package/src/messageComposer/configuration/types.ts

@@ -6,9 +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. */
+/**
+ * Optional second argument to `UploadRequestFn`.
+ * - Call `onProgress` to report 0–100 or `undefined` when indeterminate.
+ * - Forward `abortSignal` to your upload implementation to cancel the upload if the user deletes the attachment while it's uploading.
+ */
 export type UploadRequestOptions = {
   onProgress?: (percent: number | undefined) => void;
+  abortSignal?: AbortSignal;
 };
 
 export type UploadRequestFn = (