stream-chat 9.40.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;
@@ -1975,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)
      *
@@ -1986,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat",
-  "version": "9.40.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

@@ -1311,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));
@@ -1321,6 +1322,7 @@ export class StreamChat {
         timeout: 0,
         maxContentLength: Infinity,
         maxBodyLength: Infinity,
+        ...axiosRequestConfig,
       },
     });
   }
@@ -4866,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
    */
@@ -4874,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,
+    );
   }
 
   /**
@@ -4885,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
    */
@@ -4893,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 & {