Skip to content

feat(web): attach images with a file picker, not just paste and drop - #18

Open
Antisophy wants to merge 1 commit into
CyberShadow:masterfrom
Antisophy:feat/attach-images
Open

feat(web): attach images with a file picker, not just paste and drop#18
Antisophy wants to merge 1 commit into
CyberShadow:masterfrom
Antisophy:feat/attach-images

Conversation

@Antisophy

@Antisophy Antisophy commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

The composer accepts images by paste and by drag-and-drop, which between them cover a desktop and nothing else. A phone has no file drag source, and mobile browsers do not reliably put a photo on the DOM clipboard, so there is currently no way to attach an image from one at all.

This adds an attach control backed by a hidden file input (accept="image/*", multiple), which is what reaches the system photo picker.

Details worth knowing:

  • The input is visually hidden rather than display: none, since only the former is reliably clickable from script across engines, and it is cleared after each selection so the same photo can be picked again after being removed.
  • Image types outside JPEG, PNG, GIF and WebP are refused with a message in the composer instead of being attached. The media type goes to the agent API verbatim, so a HEIC attaches fine and then fails at send time; a photo picked out of a file manager can still be HEIC even where the camera path transcodes to JPEG.
  • The control is an upright paperclip drawn as an inline svg in the same idiom as the sidebar's icons: it takes its colour from the theme and renders identically everywhere, its viewBox is cropped to the artwork so the button is exactly as wide as the clip, and its height comes from the same custom property that now sizes the send and stop buttons and the single-line textarea (the buttons center their labels with flex; the textarea's padding and line-height sum to the same height), so every control in the composer row matches exactly by construction.

Covered by unit tests for the picker wiring, preview creation, the unsupported-type refusal, and re-picking the same file twice.

One of five independent changes for using cydo on a phone: #15 (composer spacing), #16 (the page dragging sideways), #17 (hiding the composer while reading history), #19 (replaying a window of history, with older messages on demand). They touch different code and can merge in any order.

@CyberShadow

Copy link
Copy Markdown
Owner

@Antisophy Can you share a screenshot of what this looks like? Esp. on mobile (narrow screens).

The composer accepts images by paste and by drag-and-drop, which between them
cover a desktop and nothing else: a phone has no file drag source, and mobile
browsers do not reliably put a photo on the DOM clipboard, so there is no way
to attach an image there at all.

Add an attach control backed by a hidden file input (accept="image/*",
multiple), which is what reaches the system photo picker. The input is
visually hidden rather than display:none, since only the former is reliably
clickable from script across engines, and it is cleared after each selection
so the same photo can be picked again after removing it.

Also reject image types the agent APIs do not accept (anything outside JPEG,
PNG, GIF and WebP) with a message in the composer, rather than attaching a
file whose send then fails: a photo picked out of a file manager can still be
HEIC even where the camera path transcodes to JPEG.

The control is an upright paperclip drawn as an inline svg in the same idiom
as the sidebar's icons: it takes its colour from the theme, renders
identically everywhere, and its height comes from the same custom property
that now sizes the send and stop buttons and the single-line textarea (the
buttons center their labels with flex, the textarea's padding and
line-height sum to the same height), so every control in the composer row
matches exactly by construction rather than by font luck.
@Antisophy

Copy link
Copy Markdown
Contributor Author

Rebased onto current master and amended after checking the height-locked composer on a desktop browser: the pin applied only to the send button, so during a turn the stop button stood taller than send and the paperclip, and the send label sat high inside its box (a 36px box leaves 16px for the line, and the fonts browsers actually render need more than that). Send and stop are now pinned together with flex-centered labels, and the single-line textarea is sized from the same property (9px padding plus a 16px line-height plus 1px borders is 36px), so every control in the row shares one exact height regardless of font metrics. Description updated to match.

The rebase also carried the attach test over to the new OrdinaryDraftStore prop (a fresh store per test instead of the removed module-level drafts map); no behavior change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants