# AttachmentService The `AttachmentService` manages the uploads of a message input. You can read more about [uploads](https://getstream.io/chat/docs/javascript/file-uploads/) in the Stream API documentation. You can use Stream's API or the dashboard to customize the [file](https://getstream.io/chat/docs/node/app-setting-overview/#file-uploads) and [image upload](https://getstream.io/chat/docs/node/app-setting-overview/#image-uploads) configuration. ## Type parameters | Name | Type | | :--- | :---------------------------------------------------------------- | | `T` | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` | ## Properties ### attachmentUploadInProgressCounter$ **attachmentUploadInProgressCounter$**: `BehaviorSubject` Emits the number of uploads in progress. You can increment and decrement this counter if you're using custom attachments and want to disable message sending until all attachments are uploaded. The SDK will handle updating this counter for built-in attachments, but for custom attachments you should take care of this. #### Defined in [projects/stream-chat-angular/src/lib/attachment.service.ts:41](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment.service.ts#L41) --- ### attachmentUploads$ **attachmentUploads$**: `Observable[]>` Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)), it adds a state (`success`, `error` or `uploading`) to each file the user selects for upload. It is used by the [`AttachmentPreviewList`](https://getstream.io/chat/docs/sdk/angular/v5/components/AttachmentPreviewListComponent/) to display the attachment previews. #### Defined in [projects/stream-chat-angular/src/lib/attachment.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment.service.ts#L45) --- ### attachmentsCounter$ **attachmentsCounter$**: `Observable` The current number of attachments #### Defined in [projects/stream-chat-angular/src/lib/attachment.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment.service.ts#L55) --- ### customAttachments$ **customAttachments$**: `BehaviorSubject[]>` You can get and set the list if uploaded custom attachments By default the SDK components won't display these, but you can provide your own `customAttachmentPreviewListTemplate$` and `customAttachmentListTemplate$` for the [`CustomTemplatesService`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/). #### Defined in [projects/stream-chat-angular/src/lib/attachment.service.ts:51](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment.service.ts#L51) --- ### maxNumberOfAttachments **maxNumberOfAttachments**: `number` = `30` The maximum number of attachments allowed for a message. The maximum is 30, you can set it to lower, but not higher. #### Defined in [projects/stream-chat-angular/src/lib/attachment.service.ts:61](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment.service.ts#L61) ## Methods ### addAttachment **addAttachment**(`attachment`): `void` You can add custom `image`, `video` and `file` attachments using this method. Note: If you just want to use your own CDN for file uploads, you don't necessary need this method, you can just specify you own upload function in the [`ChannelService`](https://getstream.io/chat/docs/sdk/angular/v5/services/ChannelService/) #### Parameters | Name | Type | | :----------- | :-------------- | | `attachment` | `Attachment` | #### Returns `void` #### Defined in [projects/stream-chat-angular/src/lib/attachment.service.ts:216](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment.service.ts#L216) --- ### createFromAttachments **createFromAttachments**(`attachments`): `void` Maps attachments received from the Stream API to uploads. This is useful when editing a message. #### Parameters | Name | Type | Description | | :------------ | :---------------- | :------------------------------------ | | `attachments` | `Attachment[]` | Attachemnts received with the message | #### Returns `void` #### Defined in [projects/stream-chat-angular/src/lib/attachment.service.ts:306](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment.service.ts#L306) --- ### deleteAttachment **deleteAttachment**(`upload`): `Promise` Deletes an attachment, the attachment can have any state (`error`, `uploading` or `success`). #### Parameters | Name | Type | | :------- | :-------------------------------------------- | | `upload` | `AttachmentUpload` | #### Returns `Promise` #### Defined in [projects/stream-chat-angular/src/lib/attachment.service.ts:241](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment.service.ts#L241) --- ### filesSelected **filesSelected**(`fileList`): `Promise` Uploads the selected files, and creates preview for image files. The result is propagated throught the `attachmentUploads$` stream. #### Parameters | Name | Type | Description | | :--------- | :------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `fileList` | `null` \| `File`[] \| `FileList` | The files selected by the user, if you have Blobs instead of Files, you can convert them with this method: [https://developer.mozilla.org/en-US/docs/Web/API/File/File](https://developer.mozilla.org/en-US/docs/Web/API/File/File) | #### Returns `Promise` A promise with true or false. If false is returned the upload was canceled because of a client side error. The error is emitted via the `NotificationService`. #### Defined in [projects/stream-chat-angular/src/lib/attachment.service.ts:154](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment.service.ts#L154) --- ### mapToAttachments **mapToAttachments**(): `Attachment[]` Maps the current uploads to a format that can be sent along with the message to the Stream API. #### Returns `Attachment[]` the attachments #### Defined in [projects/stream-chat-angular/src/lib/attachment.service.ts:271](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment.service.ts#L271) --- ### resetAttachmentUploads **resetAttachmentUploads**(): `void` Resets the attachments uploads (for example after the message with the attachments sent successfully) #### Returns `void` #### Defined in [projects/stream-chat-angular/src/lib/attachment.service.ts:107](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment.service.ts#L107) --- ### retryAttachmentUpload **retryAttachmentUpload**(`file`): `Promise` Retries to upload an attachment. #### Parameters | Name | Type | | :----- | :----- | | `file` | `File` | #### Returns `Promise` A promise with the result #### Defined in [projects/stream-chat-angular/src/lib/attachment.service.ts:226](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment.service.ts#L226) --- ### uploadVoiceRecording **uploadVoiceRecording**(`audioRecording`): `Promise` Upload a voice recording #### Parameters | Name | Type | | :--------------- | :--------------- | | `audioRecording` | `AudioRecording` | #### Returns `Promise` A promise with true or false. If false is returned the upload was canceled because of a client side error. The error is emitted via the `NotificationService`. #### Defined in [projects/stream-chat-angular/src/lib/attachment.service.ts:118](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment.service.ts#L118) --- This page was last updated at 2026-08-13T00:26:07.311Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/v5/services/AttachmentService/](https://getstream.io/chat/docs/sdk/angular/v5/services/AttachmentService/).