focalboard
focalboard copied to clipboard
File attachment in the card
Summary
This PR adds the functionality to attach files of any type to the card.
/update-branch
Error trying to update the PR. Please do it manually.
- Downloading attached files always results in them being downloaded with
.jpeg
file extension. - @asaadmahmood because of narrow card width, not even 2 attachment cards are visible at a time. It looks a bit odd (to me :P). How about making the card just wide enough to allow displaying two attachment cards and wrapping to allow, say, 3-4 rows?
Original-
Wider card with wrapping-
-
Can't select multiple files at once.
-
The detail and download icons aren't right aligned-
-
Options menu is cut/hidden when opening for the leftmost card-
@harshilsharma63 I don't mind making the card slightly wider, but I think the scroll is fine, because then the attachments don't push other content down if a user does not care about them.
Adding as content type feels weird. I don't think we should add in content section.
https://user-images.githubusercontent.com/12704875/197894936-f15563f3-dfa7-469f-9746-3ba1d0c38c3d.mov
@harshilsharma63 I don't mind making the card slightly wider, but I think the scroll is fine, because then the attachments don't push other content down if a user does not care about them.
@asaadmahmood fair enough
/update-branch
Testing I found a couple issues. Listed here in order of importance.
-
Does not respect max file size setting in config.
-
File name on download is truncated if name is truncated in card view and in some instances extension comes is different (jpg).

-
No status, nor completion message. Not sure when the upload or download completes.
-
When adding more than 2 attachments it should wrap the attachment objects vertically, rather than scrolling a single row horizontally.
-
Only single upload available, spec calls for multiple. This can be handled later.
-
Thumbnails are all red?
-
Missing Toolbars (On "Download" and displaying full file name. (see spec)
Hey Rajat. I didn't have time to do a thorough code review today. But we did load this PR on https://boards-bugbash75.test.mattermost.cloud/ and did some testing against it. It works well with smaller files however with larger files it has some issues.
- Lack of feedback - Any file that takes more than a couple seconds to load shows no feed back to the user. Even a 10 mb file leaves the user wondering what is happening. Actually during bug bash most people thought it wasn't working at all and they navigated away prior to the file completing.
I would suggest looking at Channels and how the provide feedback with upload percentage.
- File over limit should be caught prior to upload - Although if you load a file larger than the system console setting it will eventually fail correctly. Users won't wait due to issue 1. Also, this should be checked prior to attempting the upload.
Channels has also already solved this problem.
I'm going to ping @harshilsharma63 for a review on this as well.
@Rajat-Dabade Tested it with Scott earlier and it's really starting to come together!
Noticed the confirmation dialog expands to the full width of the card. Is that expected @asaadmahmood?
@wuwinson Nops, should be like this. This is from another issue, but the width should be capped at 512px.
https://www.figma.com/file/SaGJHxdJXCLnM67a6M62nq/4192---Drag-and-Drop-Manual-Revert?node-id=1%3A3&viewport=1511%2C930%2C1&t=yeuufYqZ56vPc9xd-11
/update-branch
Functionality issues-
- Downloading attached files always results in them being downloaded with a
.jpeg
file extension. - I shouldn't see the delete and add attachment options if I don't have edit access to the board.
UI issues I noticed-
-
The file name tooltip is cut off for the first attachment (the leftmost one)
-
The color of the options menu icon (three vertical dots) and the download icon are different. For the options menu icon it's
rgba(var(--center-channel-color-rgb), 0.56)
, and for download icons its#c1c1c1
. The value for the options icon is the correct one and should be used for the download icon as well. -
The options menu has a hover background but it's missing in the download icon. It should appear for both-
-
The delete attachment confirmation dialog is having the full width of the card. It should be the same width as other confirmation dialogs, for example, the delete board confirmation dialog.
Awesome work @Rajat-Dabade ! Works really well and all minor fixes have been done. LGTM!
/update-branch
/update-branch