Automatically upload pasted images to BookStack (instead of just linking them)

[Wookbert]

Describe the feature you'd like I've made a „Feature Request Image Manager: Add image via URL upload option“ quite a while ago, which still hasn't become a reality yet, but just realized that one can also copy & paste images into the (TinyMCE) editor in BookStack, which is even more convenient, than copying and pasting a URL.

The big problem is that an image copied from another website, is currently always just a link. That means if the source site disappears or the image location/path on that external server changes, the image link breaks and the image no longer shows up in BookStack. Images copied from a site which requires an HTTP login, will BookStack even force to display that HTTP login.

To prevent this, the pasted image should be directly uploaded into BookStack’s own image library and linked from there. This could be an adjustable feature, so that one can decide – either through a global setting or on each individual case, when pasting – whether BookStack uses a) a link to the external server or b) uploads the image to its internal library.

Noteworthy: Image data copied e.g. from within Photoshop or Apple’s Preview.app actually DOES ALREADY instantly upload to BookStack’s internal library when pasting (Upload progress spinner appears...).

However: If one selects the file (not the file name) on the OS level (Mac OS: click the file icon in the Finder and hit CMD-C), and then hits CMD-V (paste) in BookStack, one only gets the file name as text. Whereas pasting the very same clipboard content e.g. on a Photoshop canvas or in the Preview.app gets you the image content. (One also wants to get the actual image content in BookStack).

Describe the benefits this feature would bring to BookStack users Being able to paste images from whichever source, and uploading those in the very same step, would save one a lot of time (compared to manually downloading to disk, file locating and upload to BookStack) and would automatically ensure content integrity, regardless of what happens to the image source.

[ssddanbrown]

Thanks for providing a detailed issue report @Wookbert.

Copying from web

This may be dependant on browser/os but in chrome on Ubuntu I get two options when I right-click an image: "Copy image" and "Copy image address". As long as I use "Copy image" I can paste into the editor and it'll auto-upload into BookStack as expected. Let me know if you see differently or if you only get one "Copy" option on images.

Note, There was recently an bug that caused image-paste uploads to fail, Which was resolved in v0.27.3. If you're on an earlier release please try updating.

Dragging in an image file from system

I'm pretty sure this is something we have supported but is currently broken in the WYSIWYG editor, especially since it's working fine in the Markdown editor. I'll double check on the code for this when I get a chance.

Copying an image file from system

Can't remember if we have supported this before, Might be something that's broken also, Does not seem to work in either editors. I'll double check on this or, if not supported before, scope it out while looking at the above.

[Wookbert]

Copying from web This may be dependant on browser/os but in chrome on Ubuntu I get two options when I right-click an image: "Copy image" and "Copy image address". As long as I use "Copy image" I can paste into the editor and it'll auto-upload into BookStack as expected. Let me know if you see differently or if you only get one "Copy" option on images.

Using Chrome 76.0.3809.132 on mac OS 10.14.6 over here. I'm fully aware of the difference between Copy Image and Copy Image Address, both options exist in any browser under macOS as well.

My observations refer solely to Copy Image. Just tested it again by right click > Copy Image with images from www.spiegel.de and www.cnn.com, but when I insert with CMD-V in BookStack while in text edit mode, the image isn't uploaded, but linked.

I doubt that different sources (servers/websites) lead to different behaviours here.

As for the mentioned bug: I'm running BookStack v0.27.4.

[ssddanbrown]

How odd, also on 76.0.3809.132 here. Tested by copying from the image of this reddit post: https://www.reddit.com/r/scrungycats/comments/d3bgt5/she_kinda_looks_like_shes_chuckling_eviliy/

Might be a Mac thing, Unfortunately I don't have a mac to hand. I can double check on windows when I'm next on a windows system incase it's different there.

[Wookbert]

Tested by copying from the image of this reddit post Copied & pasted the angry cat, but here it doesn't upload, but link (linked images also don't show the little option flag, which allows you on uploaded image to numerically enter dimensions etc.)

Same result, that is link, no upload. Just tried it in Safari 12.1.2, Firefox 66.0.2, Firefox 69.0 ... all the same: link, no upload.

Interesting observation: If I use the multi-clipboard in Alfred.app (a Mac productivity extension; which I had disabled for my above tests), copy an image like the cat, then copy something else, and then restore the cat from the 2nd spot in my multi-clipboard and paste it, it surprisingly DOES upload. (Hope you understand what I'm describing here).

[BasvanH]

Using Chrome, copying text and images from a Confluence webpage. The images do not get uploaded.

[BasvanH]

Looks like some parts are missing from the getTinyMceConfig().

According to TinyMCE manual you need automatic_uploads set to true and configure a destination path with images_upload_url.

[ssddanbrown]

Hi @BasvanH, Yeah, We use some custom handling for image uploads. Could you confirm your browser, operating system and BookStack version?

Also, Are you copying the images by themselves or as part of a greater selection that includes text and other images?

[BasvanH]

Hi @ssddanbrown ,

Ok nice. I'm using BookStack v0.27.4, Chrome 76.0.3809.132 x64 on Windows 10 Build 1903.

I'm testing with text & images from webpages. Tried various source pages, but none do auto upload of images. Also tried selecting images only, from web, but that doenst auto upload ether.

It does work when I copy images & tekst from Word or other App's within windows.

(Ps, realy great job with this app. Very good coding, I love Laravel and it's framework!)

[ssddanbrown]

Spent about 10-12 hours this weekend trying to fix/align image event handling but still feel far off.

• All browser seem to set image data on DragEvent.dataTransfer so drop events are fairly easy to handle.
• No browser seem to support copy and pasting of whole files from the filesystem so that seems off the table.
• On image data copy, both FF & Chrome set image data on ClipboardEvent.clipboardData but webkit does not, instead making you jump through extra hoops. Think it can be handled via capturing and transforming output in a contentEditable block but need to check if the clipboard provides other useful stuff directly instead of creating a custom "content editable paste bin".
• We can use TinyMCE's built-in handling for Webkit image data paste events, with the paste plugin, and that seems to work but the UX is lacklustre and there is limited control to do things without hacks (Set alt tag).
• Built-in TinyMCE handling with paste plugin does not seem to work for FF, Haven't explored this to deeply.
• Built-in TinyMCE paste plugin seems to utilise a "content editable paste bin" which causes cursor location issues when building custom paste logic which results in unstable content insertion.
• Non-webkit recent breakages in paste functionality are likely be to down to an overly general fix to spreadsheet apps adding image and text content to clipboard. The fix I implemented was to not paste images if text existed. Need to be more specific and check the content. Have some logic defined but only tested on libreoffice/FireFox.
• I'm testing webkit via Gnome web browser on Linux and might be going down the complete wrong path due to potential differences between gnome web browser and Safari.

:computer: :gun: :sob:

[ssddanbrown]

Moving out to next release or maybe an earlier patch release since I really cannot spend any more time on this right now without going crazy.

[ssddanbrown]

I've just commited a83a7f34f4d4c85bfb208eb1abfdd77743856680 to help with the issues discussed in this thread.

To summarise:

• Copying from web - Was working in some cases but was unreliable due to recent attempts to better handle spreadsheet data. Additionally, Would likely not work in safari due to using non-safari-supported properties. Have now improved spreadsheet data handling to be more focused and used safari-compatible JavaScript.
• Dragging in an image file from system - Was flat out broken or not supported in some cases, Now updated to be handled in both editors.
• Copying an image file from system - Not currently supported by browsers as far as I can see so not implemented. Hopefully something we can add as web filesystem API's develop.

I've tested on Firefox and Chrome on Ubuntu. Have tried to test on Safari via BrowserStack but had a fair amount of trouble due to slow environment and forced file system restrictions. There will likely be some issues still on Safari but hopefully these changes have helped.

Since some fair improvements has been made as per the above, I'll close this off and these changes will be in v0.28, due at the end of the year.

I've ordered a cheaper old mac for testing, I'll try to test/fix before the release if I get it in time otherwise will have to do at a later stage. For any issues that remain, new issues can be opened focused on the that specific combination of insertion method and browser.