runbox7
runbox7 copied to clipboard
Drag & Drop of images into compose window should insert them
See: #1326
Describe the solution you'd like Dragging an image from a file browser (or similar) should insert it into the compose window, displaying it so the user can adjust its position/size etc.
Describe alternatives you've considered Existing functionality allows the user to attach an image, then insert it into the HTML composer.
Additional context This was attempted (see linked PR), but ends up with an img src="blob:.." which Firefox claims violates our CSP, and no amount of tweaking would convince it otherwise.
Ideas: use the TinyMCE handlers which allow uploading a dropped file/image to .. somewhere (as an attachment?), and then insert the image using a url instead of a blob ?
There should also be an obvious indication near the message text area of how images can be included, as currently one needs to first select HTML mode, then add an image as an attachment, and then use the "Insert/edit image" button in the TinyMCE toolbar where the attached image can be selected.
Research/thoughts:
- Main issue is that TinyMCE exists in an iframe, for which Firefox applies the frame-src CSP to all links inside the iframe (Chrome uses the img-src, who knows why), even adding blob: to frame-src doesn't seem to help
- It has a not-iframe mode but this doesn't work on mobile (they say)
- Instead of blob: image sources we could enable the TinyMCE "image upload" so that any pasted image gets sent to an API, stored, a url generated, and used for the image source
- img src of data: seems to "work" (though internet research says Outlook doesn't display them), so could inline embed using those
- the third alternative is to take pasted/dropped emails, store, and then send as attachments using src=cid:
More research/actual testing - all the services tested send inline images as mime attachments, using the cid= url to refer to them in the HTML part. We can add them to the usual attachments (using the "image upload" functionality) and then return the updated url.
For signatures (and general use if users want), we'll add the ability to add the image to file storage, and allow it to be picked alongside the list of available images from attachments