Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: keep attachments array and remove file and image uploads in MessageInput state #2445

Merged
merged 3 commits into from
Jul 9, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified docusaurus/docs/React/assets/message-input-ui-attachments.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docusaurus/docs/React/assets/message-input-ui-simple.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docusaurus/docs/React/assets/message-input-ui-upload-button.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
87 changes: 22 additions & 65 deletions docusaurus/docs/React/components/contexts/message-input-context.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,11 @@ Additional props to be passed to the underlying `AutoCompleteTextarea` component

### attachments

An array of attachments added to the current message.
An array of attachments added to the current message. Every attachment object carries attribute `localMetadata` that is internally used to manage the attachment state in the composer (update, remove attachments from the state, keep reference to uploaded files, keep information about the file upload state). The `localMetadata` object is discarded from each attachment object before sending the resulting message to the server. The attachments array does not contain attachments created by URL enrichment. These scraped attachments are kept in `linkPreviews` map.

| Type |
| ------------ |
| Attachment[] |
| Type |
| ----------------- |
| LocalAttachment[] |

### autocompleteTriggers

Expand Down Expand Up @@ -181,22 +181,6 @@ Custom error handler function to be called with a file/image upload fails.
| ------------------------------------------------------------------------------------------------- |
| (error: Error, type: string, file: (FileUpload \| ImageUpload)['file'] & { id?: string }) => void |

### fileOrder

The order in which file attachments have been added to the current message.

| Type |
| -------- |
| string[] |

### fileUploads

A mapping of the file attachments added to the current message.

| Type |
| ---------------------------- |
| { [id: string]: FileUpload } |

### findAndEnqueueURLsToEnrich

A function responsible for initiating URL discovery and their subsequent enrichment. It is available only if link preview rendering is enabled. Link previews are disabled by default.
Expand Down Expand Up @@ -253,22 +237,6 @@ Allows to hide MessageInput's send button. Used by `MessageSimple` to hide the s
| ------- | ------- |
| boolean | false |

### imageOrder

The order in which image attachments have been added to the current message.

| Type |
| -------- |
| string[] |

### imageUploads

A mapping of the image attachments added to the current message.

| Type |
| ----------------------------- |
| { [id: string]: ImageUpload } |

### insertText

Function to insert text into the value of the underlying `textarea` component.
Expand Down Expand Up @@ -304,7 +272,7 @@ If specified, this function overrides the default behavior specified previously.

### maxFilesLeft

The maximum number of allowed uploads minus the current number of uploads.
The maximum number of allowed uploads minus the current number of successful uploads.

| Type |
| ------ |
Expand Down Expand Up @@ -368,7 +336,7 @@ If true, disables file uploads for all attachments except for those with type 'i

### numberOfUploads

The number of file uploads on the current message.
The number of successfully uploaded files for the current message.

| Type |
| ------ |
Expand Down Expand Up @@ -468,22 +436,6 @@ const Component = () => {
};
```

### removeFile

Function to remove a file from the `fileUploads` mapping.

| Type |
| -------------------- |
| (id: string) => void |

### removeImage

Function to remove an image from the `imageUploads` mapping.

| Type |
| -------------------- |
| (id: string) => void |

### setCooldownRemaining

React state hook function that sets the `cooldownRemaining` value.
Expand Down Expand Up @@ -532,25 +484,30 @@ React mutable ref placed on the underlying `textarea` component.
| -------------------------------------------- |
| React.MutableRefObject<HTMLTextAreaElement\> |

### uploadFile
### uploadAttachment

Function to upload a file to the `fileUploads` mapping.
Uploads the file that comes as a part of the `attachment` object argument. The function expects the `attachment` object to contain attribute `localMetadata`, which in turn should contain `file` attribute referring to the file to be uploaded and an attribute `id` with attachment's unique identifier string. The `localMetadata` object is discarded when the message is posted.

| Type |
| -------------------- |
| (id: string) => void |
So the minimum required `attachment` object for upload would be:

### uploadImage
```
type MinimumUploadAttachment = {
localMetadata: {
file: File | Blob;
id: string;
}
}
```

Function to upload an image.
The function returns `undefined` if, custom upload function (`doImageUploadRequest`, `doFileUploadRequest`) fails.

| Type |
| -------------------- |
| (id: string) => void |
| Type |
| ---------------------------------------------------------------------------------------------------------------- |
| `(attachment: LocalAttachment<StreamChatGenerics>) => Promise<LocalAttachment<StreamChatGenerics> \| undefined>` |

### uploadNewFiles

Function to upload an array of files to the `fileUploads` and `imageUploads` mappings.
Function to upload an array of files and store the results as `LocalAttachment` objects in `attachments` array of the `MessageInputContext`.

| Type |
| ----------------------------------- |
Expand Down
Loading
Loading