I currently show the “Send” component only when the text input is not empty. I want to keep this behavior, but I also want users to be able to send a message only with an image (even when the text input is empty).
The challenge is:
I do not want to create empty records.
I want a record to be created only when either text exists or an image is uploaded.
Text only = OK
Image only = OK
Text + Image = OK
Empty = Not allowed
Does anyone know the best way to conditionally show the “Send” button based on either text OR an uploaded image?
Or is there a recommended workaround to detect an uploaded image before the record is created?
You could have a send button with button states or like having an invisible input component which populates message input + image URL by default which can be used as is not equal to empty condition upon creating the message and clear that out upon creating the message. How have you configured the add image screen? Do you link back to the chat screen by storing the image URL in a property or directly creating the message in that screen?
An option I can see that is good with your current setup is, add an input component and make it hidden in the screen > map the message input value & image picker value as default values in the added input component > add a visibility condition (you could add this condition to the create message action too instead as a visibility condition so the send icon always show up) for the send icon as that show when the added input is not equal to empty > add a change input value action in the send icon after the create message action to clear the input.
