Paste image to images field?

[bernhard]

For my personal website I need to add many screenshots. I'd like to just save them to the clipboard and add them to my site by pasting it from the clipboard.

I know that this is possible in CKE and I guess also in TinyMCE but I want to upload these images directly to an images field. Is that possible? I thought I've seen something like this once, but I couldn't find anything. Also it would be nice to be able to upload images from URL. That's especially handy when migrating content from old sites to new ones. But while writing I realise that for that use case a copy paste feature would also help!

Thx

[gornycreative]

I believe what you are looking for is ImportExternalImages - which was designed to allow a user to cut and paste a blog article from another platform like Blogger into a specified text area and then have PW bring in the assets from the URLs that were pasted into a field you set up in config.

https://processwire.com/modules/import-external-images/

[bernhard]

Thx! Not exactly 🙂 I just want to create a screenshot and then paste that quickly to my blog. But I want to paste it into an Images field rather then to a WYSIWYG field, because there I have more control over what happens on rendering (eg automatically resize and style it and link the high-res version as a lightbox).

[monollonom]

Regarding uploading from URL(s) you could check @Robin S’ AddImageUrls

[MarkE]

Not exactly sure what you want @bernhard, but if you are on a Windows machine, just use the snipping tool, select 'open screenshots folder' from the dropdown and drag to the field.

[wbmnfktr]

Drag'n'Drop all files to an image field is my way to go.
 

[bernhard]

Yeah, I wanted to save that "unnecessary" step and wanted to make sure I'm not missing anything, but it's fine. Thx for your answers 🙂 

[androbey]

I'm not sure I understood your requirements correctly either. Nevertheless, here's a hint, although I'm pretty sure that's not what you meant. 

I think that currently only applies to CKE. 
In the editor field under input you have the possibility to select an image field that will be used for drag&drop (does also work for pasting an image from clipboard). 

(Screenshot only in German right now)

[Jan Romero]

I suspect this shouldn’t be too hard to implement naively, but it’s probably non-trivial to get all the configurable bells and whistles to work that image fields support (like client side resizing for example).

I think you can grab images from the clipboard as blobs by listening to the paste event and filtering by type pretty easily. You’d have to figure out which image field to use, since a page could have multiple, and how to interface with it.

I agree CTRL+Ving images is delightful and a desirable feature to have! Personally I don’t like WYSIWYG editors, so a cool feature would be the ability to paste pics into a Markdown textarea and have it upload it and generate the code automatically, like we see on Github.

[flydev]

Something like that ? I remember i had started to implement the feature in the not finished module editorjs. I can put my hand on it if you want, it shouldn't be missing lot of work as the upload between the two inputfields is still working..

Click "copy" button on the first pasge, CTRL/COMMAND+V on the second.

 

 

Edit: I must admit that this feature could be handy in the core image things.

Edited July 24, 2023 by flydev

[bernhard]

It's interesting how many seem to not understand me 😄 I'll try it again! Thx for asking back!

First of all Thx @flydev for the screencast. I'm not sure I understand that as it seems to be cropped and also I don't really get why the pasted image is in the footer at the end?!

5 hours ago, Jan Romero said:

I suspect this shouldn’t be too hard to implement naively, but it’s probably non-trivial to get all the configurable bells and whistles to work that image fields support (like client side resizing for example).

True

5 hours ago, Jan Romero said:

I think you can grab images from the clipboard as blobs by listening to the paste event and filtering by type pretty easily. You’d have to figure out which image field to use, since a page could have multiple, and how to interface with it.

I agree CTRL+Ving images is delightful and a desirable feature to have! Personally I don’t like WYSIWYG editors, so a cool feature would be the ability to paste pics into a Markdown textarea and have it upload it and generate the code automatically, like we see on Github.

True! Well it doesn't necessarily have to be CMD+V as you are right, it would be hard to tell which image field to target. Maybe a button to click would be easier/better. Maybe that could only appear if a suitable image is available in the clipboard.

6 hours ago, androbey said:

I think that currently only applies to CKE. 
In the editor field under input you have the possibility to select an image field that will be used for drag&drop (does also work for pasting an image from clipboard). 

(Screenshot only in German right now)

Thx - I already tried to explain that I'm not talking about the CKE field but a single core image upload field. But technically that shows that it's possible and we have the pieces already in the core. They would just have to be applied a little differently.

---

For everybody who still didn't understand my request:

Let's say we created a ticket system. And every ticket has an image field where we can/should upload a screenshot of the issue. Now I open my screenshot app on my laptop and add some arrows, blurs, notes etc. and then I hit "copy to clipboard". Then it would be nice to be able to go to my ticket system and just paste my image into that image field.

I agree that this is really not a lot effort to save the image first and then load it from the PW images field, but those little extra steps add up and sometimes they make the difference whether an app feels easy or tedious to use.

Now

• make screenshot
• click save image to disk
• think about where to save the image, or even worse add some more clicks to find the correct path to save it
• open processwire and click load image
• find the correct image path to load the image from
• hit upload
• delete the now unnecessary image from your disk

My wish

• make screenshot
• click copy image to clipboard
• open processwire and click paste from clipboard

For me this workflow would really be much better.

[flydev]

Its copied on the bottom because its an example of a feature not finished on another (not really) WIP module.

it does what you are talking about. Copy image from another field, or from a screenshot, it doesnt matter, I understood you was talking about « clipboard ».

Quote

Its copied on the bottom because its an example ..

The specific reason is as you are limited on mimetypes when working with the clipboard write api, in the example above it render the blob in a canvas, on différent format, including webp.

Voila 🙂 

Edited July 24, 2023 by flydev

[MarkE]

Did you try snippets in Windows?  No need to save, it is automatically put in the screenshots folder which you keep open, so just snapshot it, edit as required and drag. When done, delete all the contents of your folder. Ok so that’s one more step than ideal, but at no development effort!

[bernhard]

Thx for that reminder @MarkE my screenshot tool on mac actually also has the feature to open the screenshots folder directly 🙂 Well, it's just about preference I guess and initially I was just asking if there is already a solution for that - then it would also be no development effort 😉 

But still I think it would be nice if the core images field would support that for situations where you simply have something at hand in the clipboard and it would take some extra steps otherwise.

For example from any website you could then just rightclick on the image and then paste it to the field. Now you'd have to "save image as..." and then upload it. Not a big deal, but still annoying for me 🙂 

[MarkE]

26 minutes ago, bernhard said:

For example from any website you could then just rightclick on the image and then paste it to the field.

PasteUrl from @Robin S?

[BrendonKoz]

The problem here is (potentially) three-fold, depending on (others') needs:

1. If it's supported in a Pageimage field, it's likely expected to also be supported in a Pageimages field (WireArray) which adds some awkward complexity, because...
2. We can have multiple image fields per template - we'd have to determine focus prior to pasting for this to work properly, whether a button is clicked (and it just attempts to pull from the clipboard) or a some sort of area gains focus, and then we paste...
3. As flydev mentions, we're limited in the filetype that we can save as - and simultaneously if there's a developer preference should it be predetermined, or do we just go with whatever the OS provided as default?

What you might be thinking about is this forum's ability to paste an image as a file attachment, but it is essentially using CKE to handle that; otherwise, I only really remember Robin's module as a way to paste URLs of a file (and not just a data: URL, though it might be able to be modified to handle that).

I've handled clipboard image pasting before, but I've never handled multiple images (files) within a single clipboard instance. That's outside your described scenario, to a degree, but drag-and-drop supports multiple files, so should copying multiple existing files and pasting also similarly work in this example?