szurubooru icon indicating copy to clipboard operation
szurubooru copied to clipboard

Upload from clipboard

Open neobooru opened this issue 3 years ago • 4 comments

A few small issues.

1. You can only paste an image in the text input

This could be fixed by changing this._urlInputNode.addEventListener("paste", ...) to window.onpaste = ...;, but it feels a bit dirty to touch the window. We can't use window.addEventListener because I don't think we have an 'unmounted' event where we can call removeEventListener. Though the same is true when using window.onpaste, but at least then it wouldn't add duplicate listeners when mounting the upload view multiple times (happens when navigating from upload -> another page -> upload again).

2. The "Change post content" upload field text is unchanged

Because it wouldn't fit. Any suggestions?

How it is now: image

How it would be with the change: image

3. No feedback when the clipboard can't be accessed

This doesn't work when the user has some privacy settings enabled (though at that point it also wouldn't work on imgur etc). I wouldn't know which specific setting. It doesn't work on my personal Chrome/Firefox setup, but it works in a 'clean' Edge (Chromium).

neobooru avatar Jun 04 '21 18:06 neobooru

I'm not really familiar with the clipboard browser API.

Could we maybe add a button next to "confirm" that pulls an image from the clipboard? To make it look neat on mobile, It could just have this icon (https://fontawesome.com/v5.15/icons/paste) and a tooltip could explain what it does.

sgsunder avatar Sep 13 '21 14:09 sgsunder

Could we maybe add a button next to "confirm" that pulls an image from the clipboard? To make it look neat on mobile, It could just have this icon (https://fontawesome.com/v5.15/icons/paste) and a tooltip could explain what it does.

I don't think this is possible. You aren't allowed to 'pull' data from the clipboard, you can only 'accept' data when the user pastes the content themself. The action has to be initiated by the user.

There is a new clipboard.read API, but I haven't tested it and it also looks like it isn't really supported.

neobooru avatar Sep 13 '21 15:09 neobooru

Hmm, OK.

  1. I personally don't think is a major issue.

  2. Maybe we just replace the "Confirm" with a smaller icon so the textbar is more visible? I think we could also add a hook so that when a URL/URLs get pasted they get auto-confirmed? so: a) One text URL is pasted: The URL gets added to the list ready for upload b) Multiple text URLs are pasted (whitespace/newline delimited): All URLs get added to the list, duplicate URLs get ignored c) Image data is pasted: The image data gets added to the list

(a) and (b) function similar to how adding tags to posts work, it would also allow us to 'get away' with shrinking the confirm button because most people won't be using it as much anymore

  1. Again, I'm not sure how this works, does the API generate an exception we can maybe use?

sgsunder avatar Sep 13 '21 16:09 sgsunder

Images copy-pasted from Chrome will not work because there are two items, one of which gets resolved to null, and we end up feeding it to URL.createObjectURL.
Here's my take on it: https://github.com/po5/szurubooru/commit/672a57d2ec2588c8740a634a895b74a9cb2c2e2b + https://github.com/po5/szurubooru/commit/7a1c0d964e4c224c276927d332e4d6415ac9a67e

I don't think we have an 'unmounted' event

There is, with views.monitorNodeRemoval().
See how it's done in controls/post_content_control.js @ _install() and _uninstall().

po5 avatar May 17 '23 05:05 po5