Support dragdrop for URLs to read infotext

[catboxanon]

Description

Adds the ability to drag and drop URLs (like an address from the browser address bar) or images that originate from URLs. The usecase for this is dragdropping images from another website or another browser instance of the webui to read the infotext.

Update: this now works on the frontend rather than the backend to avoid some potentially security issues.

Screenshots/videos:

Example with dragdropping between two separate browser windows.

Checklist:

• I have read contributing wiki page
• I have performed a self-review of my own code
• My code follows the style guidelines
• My code passes tests

[AUTOMATIC1111]

If the request is made and fails, there should be some form of feedback, at least output to console (but possibly also gr.Warning for UI). Are there any considerations from security side?

[w-e-w]

update:
drag and drop image works in chrome but not firefox

---

drag and drop image from other websites or between web UI instances has always worked without this PR
this PR only adds the ability to drag urls (text)

if a user already opens the URL in the browser tab they can just drag the image
so unless the user wishes to drag URL text and not the image this feature does not do much

personally I don't see this being too useful as the user is unlikely to know what a without opening the image
which means they will most likely open a URL in a separate tab, confirm that this is what they then drag it to webui
but at this point I think it's easier for user to just drag the big image across and the small text

---

security issue
this will have will cause SSRF like

• fix potential ssrf attack in #12663 #12698'

in my opinion if this were to be implemented the web request should be made by the Client using JavaScript and not server on side
reasons

1. security, no risk of ssrf
2. using browser is less likely to be blocked likey to get blocked by servers that block bots

[w-e-w]

drag and drop image works in chrome but not firefox

image drag and drop works in chrome / min / edge but not in firefox / librewolf

[catboxanon]

drag and drop image works in chrome but not firefox

This hadn't occurred to me actually. I ran into that over a year ago when making a userscript though. I think this is a case where Firefox follows the browser spec but Chrome doesn't, annoyingly.

in my opinion if this were to be implemented the web request should be made by the Client using JavaScript and not server on side

I agree with this. I admittedly implemented it server-side since it was the path of least resistance in this case.

Thanks for the feedback. I'll close this PR and open a new one when I get a chance to address all this.

[missionfloyd]

That seems to work.

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types

[catboxanon]

Nice, that's much better. I'll just add some error handling to this now.