Upload other files then images to whiteboards

[grnd-alt]

Proof of concept to show how we could intercept the excalidraw drag'n'drop handling to support more filetypes.

Current state:
Drag and drop from explorer into whiteboard.
image file supported by excalidraw -> normal image render
other filetype -> filename + icon

on click on other filetypes -> sidebar opened with download button

⚠️ TODO:

• moving the element should not result in file download
• proper design for element in whiteboard (respecting darkmode)
• use file icons depending on type
• max file size

handled in follow ups

• double check files being removed after longer time
• copy paste into whiteboard
• Add button to upload a file

[grnd-alt]

(@nextcloud/designers do you have input for the file element?, we can use any excalidraw element to display the file, but no html, maybe you can create a design in excalidraw?)

[marcoambrosini]

@grnd-alt what is needed here exactly? Could you give a bit more context?

[marcoambrosini]

Update after call with @grnd-alt

• we have to use excalidraw limited range of styles and colors
• we can use our own svg icons for the different file types
• we should invert colors of icons/text/borders with dark theme

Here's a quick mockup:

[juliusknorr]

I'm not sure if double click is what we should do here, was rather confusing to me in the first run. We talked about a popup to download the file, maybe that is something to reconsider when we cannot easily have a nice button click behaviour.

Could also be a small bar at the bottom maybe if the "file node" is selected similar to https://m1.material.io/components/snackbars-toasts.html# with a dedicated Download button?

[marcoambrosini]

I think that the popup is the best option for now. The snack bar is great for mobile devices but I'm worried that it wouldn't work well on larger displays.

[grnd-alt]

@marcoambrosini
I've now implemented it using the toast messages we already have in nextcloud when you click on them the file is downloaded... I don't think it's the best solution, but we can't draw entirely over the canvas with a popup or something because the file-elements are not movable anymore if something is in front of them. Do you think we should design a small new popup or stick with the nextcloud toast message as in the screenshot?

[juliusknorr]

Added as a follow up to the list in the first post:

• Add button to upload a file