File attachments in chat

[leihla]

Problem

We need a simple UI for uploading file attachments and displaying them.

Solution

I've designed two flows for send picture attachment or file attachments. Users should be able to attach a file either by clicking on the attachment icon on the message bar or dragging and dropping an attachment in the chat area.

Send Image https://www.figma.com/file/mxGadAHfkWH6qApebQvcdN/Group-Income-2.0?type=design&node-id=26191%3A296507&t=teMy1XvN3V9PR9oY-1

Send Attachment https://www.figma.com/file/mxGadAHfkWH6qApebQvcdN/Group-Income-2.0?type=design&node-id=26191%3A301188&t=teMy1XvN3V9PR9oY-1

Related to #1557

[SebinSong]

Dev TODO List

Part 1. UI components that don't involve changing chatroom.js contracts

• [x] Task 1-1. Load and preview image attachment Load image from the file-system and display the preview of the image and make it removable via 'x' button at the corner.

• [x] Task 1-2. Load and preview non-image type attachment Extend the Task 1-1 to non-image type attachments.

• [x] Task 1-3. Implement file-size detection and build 'File too large' modal

• [x] Task 1-4. Implement task 1-1, 1-2, 1-3 by drag&drop action

Part 2. UI components that involve changing chatroom.js contracts

• [ ] Task 2-1. Implement 'Send a message with image attachment' Implement 'file attachment' in chatroom.js contracts and also update Message.vue component with image-preview element.

• [ ] Task 2-2. Implement 'Send a message with non-image type attachment' Implement 'file attachment' in chatroom.js contracts and also update Message.vue component with the file preview element.

• [ ] Task 2-3. Implement 'Download the attachment' Add the download button to Message.vue component and make it possible to download the attached file.

[SebinSong]

I'm going to develop this feature step by step according to the Todo list created above. cc. @taoeffect

[SebinSong]

@taoeffect I've got a question regarding this modal below. It looks to me that this modal having two buttons is unnecessary as they both are supposed to result in the same action, which is 'Closing the modal and discard the file the user has selected.' Do you agree we can remove the 'Cancel' button here?

[taoeffect]

@SebinSong Yep, agreed! 👍

[SebinSong]

@taoeffect I think all Task - 1 items are complete and ready for sending a PR. As described in the todo details, implementing the functionality in the chatroom.js is better to be done after E2E encryption work is complete in the backend. So for now, when the Send button is clicked with a file attached,

I've made it so that it results in this appended text message saying the attached file name and the feature will be prepared in the future.

Does this sound good to you? If it does, I can put the work together and send a PR.

[taoeffect]

@SebinSong yeah, sending a message that just has that text sounds good 👍 Hopefully this doesn't require modifying chatroom.js at all

[taoeffect]

Pretty sure this has been closed.