Limit the number of attachments selected

[alexlopezit]

Is there is any way we can prevent the user to select more than 10 attachments as it seems that is the limit when sending a message to the server, at the moment you can select more than that and then send the message which will fail, then clicking the link Message failed. Click to try again. will simply keep failing in the background and the users does not know why, also there is no way to remove this failed message from the UI witch is a bit confusing, unless you refresh the page.

gz#6534

[mahboubii]

Thanks for reporting this, currently API limits the number of attachments to a maximum of 10 for each message, we will put a reflect this limit in our components soon.

[alexlopezit]

Thanks @mahboubii

I just found this prop we can use on the Channel component maxNumberOfFiles, which basically disables the the ImageDropzone and the FileUploadButton, which is what we are looking for, however would be good to get a visual indication or display a message somewhere so the user knows why it's been disabled.

I would suggest to perhaps changing this text

stream-chat-react/src/components/MessageInput/MessageInputLarge.js

Line 122 in 3077169

<title>{t('Attach files')}</title>

to something along the lines You have reached the max number of attachments per message or something like that.

Also if possible could the FileUploadButton https://github.com/GetStream/react-file-utils/blob/master/src/components/FileUploadButton.js have a class when disabled, so we can perhaps change the color of the icon to make it look disabled too.

And looks like there is a bug with ImageDropzone as if I set the maxNumberOfFiles={4} but If i drag 5 or more files, they all get accepted.

[jaapbakker88]

@alexlopezit problem is that it disables when you reach the limit, but as long as you haven't reached the limit it allows you to add multiple files that will get you across that limit. We're looking into a solution for this.

Visual indication is something we will definitely add as well.

[mahboubii]

@alexlopezit fixed in v3.1.5

[alexlopezit]

Hi @jaapbakker88 and @mahboubii , I just checked this on v3.1.6 and though it was not working until I manually added the prop maxNumberOfFiles to the channel, perhaps you want to make set the default value if not present?

[mahboubii]

@alexlopezit unfortunately we weren't able to reproduce the issue. are you using the add file button or the drag&drop option?

[ath92]

I did some more digging and found that there's a bug in react-dropzone that could be related to this (react-dropzone/react-dropzone#1025 Issue with PR to fix it).

@alexlopezit The only way I was able to reproduce the problem you described is by first dragging less than the maximum number of files into the dropzone, and then dragging another set of files into it so that the total number of files exceeds the specified max (or, in case no maximum is provided, the default value of 10 files). Could you confirm that this is what triggers the bug for you?

[alexlopezit]

Hi @ath92 and @mahboubii ,
Yes dragging is one way to replicate the issue, and the other way is enabling multipleUploads, then clicking the add button and selecting 9 files, repeat the process and now you got 18 files ready to send, and the "add button" is not disabled in this case

[jaapbakker88]

@alexlopezit we've released a fix for this issue in version 3.1.7, please let us know if that solves it for you!

[alexlopezit]

Awesome @jaapbakker88 , just tested it and worked perfect. Thanks