Drag & Drop image from web produces odd results, illegal characters

Moonbase59 · April 20, 2021, 3:25pm

Steps to reproduce

Go to a web page, say this one.
Drag & Drop the large image into your Obsidian note.

Expected result

Some kind of (working) image link, or image embed.

Actual result

<�div class="article\_\_hero-image medium-9 cell"> <�img src="https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg" alt="Misty Morning Drive"> <�/div>

Note:

It copies the whole <div>, not just the image. (Intended?)
After each opening <, an unknown character � is shown.
The <div> classes are actually article__hero-image medium-9 cell (without the escaping \).
The web page’s encoding is UTF-8, so no character set problems expected.
This (or similar) happened on all different web sites I tried.
I assume it’s not a browser problem, since dragging & dropping into other applications works just fine (tested various editors), for instance in Apostrophe, it produces:
```
[Webseite](https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg)
```

Environment

Operating system: Linux Mint 20.1/Cinnamon

Obsidian version: 0.11.13 (AppImage)
Installer version: 0.10.11
Browser: Firefox 88.0 (64-bit)

Additional information

The web site is my own, the image CC0, so everything can be used here.

WhiteNoise · April 25, 2021, 3:04pm

I couldn’t reproduce this problem. @argentum @koala
can you repro?

Is it possible that this is a problem with your X11/Wayland/Window Manager/Desktop enviroment you are using?

argentum · April 25, 2021, 6:15pm

I can’t reproduce on Ubuntu 18.04 + Firefox. Not sure if it’s related to the compositor. Does this happen on all website?

koala · April 25, 2021, 8:42pm

Operating System: Manjaro Linux
KDE Plasma Version: 5.21.4
KDE Frameworks Version: 5.81.0
Qt Version: 5.15.2
Kernel Version: 5.10.30-1-MANJARO
OS Type: 64-bit
Graphics Platform: X11

I can reproduce on Manjaro, but only when I drag from Firefox. When I drag from Chromium, it works as expected.

grafik

It also happens on other websites, the Firefox version is the same as in the bug report (88.0).

Obsidian version 0.12.1
Installer version 0.11.9
AppImage

WhiteNoise · April 25, 2021, 8:55pm

I don’t think this is our problem. I think there is something in how the text is encoded at the source

koala · April 25, 2021, 9:06pm

I have no idea what the issue could be, it also happens on other websites in Firefox (Google, Wikiwand).

It’s curious that it works for @argentum.

koala · April 26, 2021, 7:53am

It also happens when I drag and drop a link from Thunderbird, so it seems to be a Mozilla problem.

Moonbase59 · April 26, 2021, 9:07am

Thanks for investigating! Should I try anything more on this machine? I’d be willing to install Chromium or maybe Opera for testing. Would this help nail it down to Browser or DE?

Yes, it does happen on other websites here.

WhiteNoise · April 26, 2021, 1:15pm

I think you should investigate which program handles the clipboard.

Moonbase59 · April 26, 2021, 1:28pm

How can I do that?

I suspect I’m using whatever Gnome (or Linux Mint 20.1 Cinnamon) uses as a standard clipboard manager.

Firefox GNOME extensions aren’t installed
No additional clipboard indicators/handlers/managers/tweaks are installed on the system.

Moonbase59 · April 27, 2021, 12:19pm

If it helps somehow, using Firefox, I called up the “Clipboard Inspector” web page and dropped the “Roadside Tea Room” image there.

Maybe the bad result in Obsidian is taken from a wrong “part”?

Here’s the result:


event.dataTransfer contains:
.types12 type(s) available
type	getData(type)
text/x-moz-url	

https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg
 Misty Morning Drive 

text/x-moz-url-data	

https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg

text/x-moz-url-desc	

 Misty Morning Drive 

text/uri-list	

https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg

text/_moz_htmlcontext	

<html class="whatinput-types-initial whatinput-types-mouse" data-whatinput="mouse" data-whatintent="mouse" lang="de"><body><div class="pagewrapper grid-container"><main id="main" class="main grid-x grid-padding-x grid-padding-y"><article class="article cell"><div class="subgrid grid-x grid-padding-x grid-padding-y align-center"><header class="article__header cell"><div class="subgrid grid-x grid-padding-x grid-padding-y align-center"></div></header></div></article></main></div></body></html>

text/_moz_htmlinfo	

0,0

text/html	

<div class="article__hero-image medium-9 cell">
          <img src="https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg" alt="Misty Morning Drive">
        </div>

text/plain	

https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg

application/x-moz-nativeimage	

[cut because too long!]

application/x-moz-file-promise	

application/x-moz-file-promise

application/x-moz-file-promise-url	

https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg

application/x-moz-file-promise-dest-filename	

misty-morning-drive.550b7136.jpg

.items12 item(s) available
kind	type	getAsFile()
string	text/x-moz-url	N/A
string	text/x-moz-url-data	N/A
string	text/x-moz-url-desc	N/A
string	text/uri-list	N/A
string	text/_moz_htmlcontext	N/A
string	text/_moz_htmlinfo	N/A
string	text/html	N/A
string	text/plain	N/A
string	application/x-moz-nativeimage	N/A
string	application/x-moz-file-promise	N/A
string	application/x-moz-file-promise-url	N/A
string	application/x-moz-file-promise-dest-filename	N/A
.files0 file(s) available

You can also use “Clipboard Test” and drop into the “Paste here:” field:

Drop Event
types: 12 types
type: text/x-moz-url
https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg
 Misty Morning Drive 
type: text/x-moz-url-data
https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg
type: text/x-moz-url-desc
 Misty Morning Drive 
type: text/uri-list
https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg
type: text/_moz_htmlcontext
<html class="whatinput-types-initial whatinput-types-mouse" data-whatinput="mouse" data-whatintent="mouse" lang="de"><body><div class="pagewrapper grid-container"><main id="main" class="main grid-x grid-padding-x grid-padding-y"><article class="article cell"><div class="subgrid grid-x grid-padding-x grid-padding-y align-center"><header class="article__header cell"><div class="subgrid grid-x grid-padding-x grid-padding-y align-center"></div></header></div></article></main></div></body></html>
type: text/_moz_htmlinfo
0,0
type: text/html
<div class="article__hero-image medium-9 cell">
          <img src="https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg" alt="Misty Morning Drive">
        </div>
type: text/plain
https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg
type: application/x-moz-nativeimage
\u{195}\u{195}\u{195}\u{255}\u{199}\u{199}\u{199}\u{255}\u{199}\u{199}\u{199}\u{255}\u{197}\u{197}\u{197}\u{255}\u{200}\u{200}\u{200}\u{255}\u{205}\u{205}\u{205}\u{255}\u{202}\u{202}\u{202}\u{255}\u{194}\u{194}\u{194}\u{255}\u{200}\u{200}\u{200}\u{255}\u{199}\u{199}\u{199}\u{255}\u{197}\u{197}\u{197}\u{255}\u{196}\u{196}\u{196}\u{255}\u{197}\u{197}\u{197}\u{255}\u{199}\u{199}\u{199}\u{255}\u{201}\u{201}\u{201}\u{255}\u{203}\u{203}\u{203}\u{255}\u{200}\u{200}\u{200}\u{255}\u{199}\u{199}\u{199}\u{255}\u{200}\u{200}\u{200}\u{255}\u{202}\u{202}\u{202}\u{255}\u{205}\u{205}\u{205}\u{255}\u{205}\u{205}\u{205}\u{255}\u{203}\u{203}\u{203}\u{255}\u{201}\u{201}\u{201}\u{255}\u{199}\u{199}\u{199}\u{255}\u{200}\u{200}\u{200}\u{255}\u{201}\u{201}\u{201}\u{255}\u{203}\u{203}\u{203}\u{255}\u{204}\u{204}\u{204}\u{255}\u{203}\u{203}\u{203}\u{255}\u{200}\u{200}\u{200}\u{255}\u{198}\u{198}\u{198}\u{255}\u{199}\u{199}\u{199}\u{255}\u{195}\u{195}\u{195}\u{255}\u{197}\u{197}\u{197}\u{255}\u{202}\u{202}\u{202}\u{255}\u{201}\u{201}\u{201}\u{255}\u{196}\u{196}\u{196}\u{255}\u{202}\u{202}\u{202}\u{255}\u{214}\u{214}\u{214}\u{255}\u{207}\u{207}\u{207}\u{255}\u{206}\u{206}\u{206}\u{255}\u{206}\u{206}\u{206}\u{255}\u{207}\u{207}\u{207}\u{255}\u{209}\u{209}\u{209}\u{255}\u{210}\u{210}\u{210}\u{255}\u{208}\u{208}\u{208}\u{255}\u{207}\u{207}\u{207}\u{255}\u{200}\u{200}\u{200}\u{255}\u{204}\u{204}\u{204}\u{255}\u{207}\u{207}\u{207}\u{255}\u{205}\u{205}\u{205}\u{255}\u{205}\u{205}\u{205}\u{255}\u{207}\u{207}\u{207}\u{255}\u{204}\u{204}\u{204}\u{255}\u{200}\u{200}\u{200}\u{255}\u{189}\u{189}\u{189}\u{255}\u{191}\u{191}\u{191}\u{255}\u{195}\u{195}\u{195}\u{255}\u{202}\u{202}\u{202}\u{255}\u{208}\u{208}\u{208}\u{255}\u{210}\u{210}\u{210}\u{255}\u{210}\u{210}\u{210}\u{255}\u{208}\u{208}\u{208}\u{255}\u{211}\u{211}\u{211}\u{255}\u{206}\u{206}\u{206}\u{255}\u{202}\u{202}\u{202}\u{255}\u{201}\u{201}\u{201}\u{255}\u{204}\u{204}\u{204}\u{255}\u{206}\u{206}\u{206}\u{255}\u{205}\u{205}\u{205}\u{255}\u{204}\u{204}\u{204}\u{255}\u{211}\u{211}\u{211}\u{255}\u{207}\u{207}\u{207}\u{255}\u{203}\u{203}\u{203}\u{255}\u{202}\u{202}\u{202}\u{255}\u{204}\u{204}\u{204}\u{255}\u{207}\u{207}\u{207}\u{255}\u{208}\u{208}\u{208}\u{255}\u{207}\u{207}\u{207}\u{255}\u{211}\u{211}\u{211}\u{255}\u{208}\u{208}\u{208}\u{255}\u{213}\u{213}\u{213}\u{255}\u{214}\u{214}\u{214}\u{255}\u{204}\u{204}\u{204}\u{255}\u{205}\u{205}\u{205}\u{255}\u{210}\u{210}\u{210}\u{255}\u{207}\u{207}\u{207}\u{255}\u{208}\u{208}\u{208}\u{255}\u{207}\u{207}\u{207}\u{255}\u{206}\u{206}\u{206}\u{255}\u{206}\u{206}\u{206}\u{255}\u{207}\u{207}\u{207}\u{255}\u{209}\u{209}\u{209}\u{255}\u{211}\u{211}\u{211}\u{255}\u{212}\u{212}\u{212}\u{255}\u{202}\u{202}\u{202}\u{255}\u{210}\u{210}\u{210}\u{255}\u{216}\u{216}\u{216}\u{255}\u{215}\u{215}\u{215}\u{255}\u{216}\u{216}\u{216}\u{255}\u{218}\u{218}\u{218}\u{255}\u{214}\u{214}\u{214}\u{255}\u{206}\u{206}\u{206}\u{255}\u{203}\u{203}\u{203}\u{255}\u{214}\u{214}\u{214}\u{255}\u{218}\u{218}\u{218}\u{255}\u{212}\u{212}\u{212}\u{255}\u{211}\u{211}\u{211}\u{255}\u{216}\u{216}\u{216}\u{255}\u{215}\u{215}\u{215}\u{255}\u{208}\u{208}\u{208}\u{255}\u{200}\u{200}\u{200}\u{255}\u{207}\u{207}\u{207}\u{255}\u{214}\u{214}\u{214}\u{255}\u{217}\u{217}\u{217}\u{255}\u{214}\u{214}\u{214}\u{255}\u{210}\u{210}\u{210}\u{255}\u{209}\u{209}\u{209}\u{255}\u{209}\u{209}\u{209}\u{255}\u{212}\u{212}\u{212}\u{255}\u{223}\u{223}\u{223}\u{255}\u{222}\u{222}\u{222}\u{255}\u{208}\u{208}\u{208}\u{255}\u{207}\u{207}\u{207}\u{255}\u{218}\u{218}\u{218}\u{255}\u{221}\u{221}\u{221}\u{255}\u{213}\u{213}\u{213}\u{255}...
type: application/x-moz-file-promise
application/x-moz-file-promise
type: application/x-moz-file-promise-url
https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg
type: application/x-moz-file-promise-dest-filename
misty-morning-drive.550b7136.jpg
files: 0 files
items: 12 items
item: string (text/x-moz-url)
https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg
 Misty Morning Drive 
item: string (text/x-moz-url-data)
https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg
item: string (text/x-moz-url-desc)
 Misty Morning Drive 
item: string (text/uri-list)
https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg
item: string (text/_moz_htmlcontext)
<html class="whatinput-types-initial whatinput-types-mouse" data-whatinput="mouse" data-whatintent="mouse" lang="de"><body><div class="pagewrapper grid-container"><main id="main" class="main grid-x grid-padding-x grid-padding-y"><article class="article cell"><div class="subgrid grid-x grid-padding-x grid-padding-y align-center"><header class="article__header cell"><div class="subgrid grid-x grid-padding-x grid-padding-y align-center"></div></header></div></article></main></div></body></html>
item: string (text/_moz_htmlinfo)
0,0
item: string (text/html)
<div class="article__hero-image medium-9 cell">
          <img src="https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg" alt="Misty Morning Drive">
        </div>
item: string (text/plain)
https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg
item: string (application/x-moz-nativeimage)
\u{195}\u{195}\u{195}\u{255}\u{199}\u{199}\u{199}\u{255}\u{199}\u{199}\u{199}\u{255}\u{197}\u{197}\u{197}\u{255}\u{200}\u{200}\u{200}\u{255}\u{205}\u{205}\u{205}\u{255}\u{202}\u{202}\u{202}\u{255}\u{194}\u{194}\u{194}\u{255}\u{200}\u{200}\u{200}\u{255}\u{199}\u{199}\u{199}\u{255}\u{197}\u{197}\u{197}\u{255}\u{196}\u{196}\u{196}\u{255}\u{197}\u{197}\u{197}\u{255}\u{199}\u{199}\u{199}\u{255}\u{201}\u{201}\u{201}\u{255}\u{203}\u{203}\u{203}\u{255}\u{200}\u{200}\u{200}\u{255}\u{199}\u{199}\u{199}\u{255}\u{200}\u{200}\u{200}\u{255}\u{202}\u{202}\u{202}\u{255}\u{205}\u{205}\u{205}\u{255}\u{205}\u{205}\u{205}\u{255}\u{203}\u{203}\u{203}\u{255}\u{201}\u{201}\u{201}\u{255}\u{199}\u{199}\u{199}\u{255}\u{200}\u{200}\u{200}\u{255}\u{201}\u{201}\u{201}\u{255}\u{203}\u{203}\u{203}\u{255}\u{204}\u{204}\u{204}\u{255}\u{203}\u{203}\u{203}\u{255}\u{200}\u{200}\u{200}\u{255}\u{198}\u{198}\u{198}\u{255}\u{199}\u{199}\u{199}\u{255}\u{195}\u{195}\u{195}\u{255}\u{197}\u{197}\u{197}\u{255}\u{202}\u{202}\u{202}\u{255}\u{201}\u{201}\u{201}\u{255}\u{196}\u{196}\u{196}\u{255}\u{202}\u{202}\u{202}\u{255}\u{214}\u{214}\u{214}\u{255}\u{207}\u{207}\u{207}\u{255}\u{206}\u{206}\u{206}\u{255}\u{206}\u{206}\u{206}\u{255}\u{207}\u{207}\u{207}\u{255}\u{209}\u{209}\u{209}\u{255}\u{210}\u{210}\u{210}\u{255}\u{208}\u{208}\u{208}\u{255}\u{207}\u{207}\u{207}\u{255}\u{200}\u{200}\u{200}\u{255}\u{204}\u{204}\u{204}\u{255}\u{207}\u{207}\u{207}\u{255}\u{205}\u{205}\u{205}\u{255}\u{205}\u{205}\u{205}\u{255}\u{207}\u{207}\u{207}\u{255}\u{204}\u{204}\u{204}\u{255}\u{200}\u{200}\u{200}\u{255}\u{189}\u{189}\u{189}\u{255}\u{191}\u{191}\u{191}\u{255}\u{195}\u{195}\u{195}\u{255}\u{202}\u{202}\u{202}\u{255}\u{208}\u{208}\u{208}\u{255}\u{210}\u{210}\u{210}\u{255}\u{210}\u{210}\u{210}\u{255}\u{208}\u{208}\u{208}\u{255}\u{211}\u{211}\u{211}\u{255}\u{206}\u{206}\u{206}\u{255}\u{202}\u{202}\u{202}\u{255}\u{201}\u{201}\u{201}\u{255}\u{204}\u{204}\u{204}\u{255}\u{206}\u{206}\u{206}\u{255}\u{205}\u{205}\u{205}\u{255}\u{204}\u{204}\u{204}\u{255}\u{211}\u{211}\u{211}\u{255}\u{207}\u{207}\u{207}\u{255}\u{203}\u{203}\u{203}\u{255}\u{202}\u{202}\u{202}\u{255}\u{204}\u{204}\u{204}\u{255}\u{207}\u{207}\u{207}\u{255}\u{208}\u{208}\u{208}\u{255}\u{207}\u{207}\u{207}\u{255}\u{211}\u{211}\u{211}\u{255}\u{208}\u{208}\u{208}\u{255}\u{213}\u{213}\u{213}\u{255}\u{214}\u{214}\u{214}\u{255}\u{204}\u{204}\u{204}\u{255}\u{205}\u{205}\u{205}\u{255}\u{210}\u{210}\u{210}\u{255}\u{207}\u{207}\u{207}\u{255}\u{208}\u{208}\u{208}\u{255}\u{207}\u{207}\u{207}\u{255}\u{206}\u{206}\u{206}\u{255}\u{206}\u{206}\u{206}\u{255}\u{207}\u{207}\u{207}\u{255}\u{209}\u{209}\u{209}\u{255}\u{211}\u{211}\u{211}\u{255}\u{212}\u{212}\u{212}\u{255}\u{202}\u{202}\u{202}\u{255}\u{210}\u{210}\u{210}\u{255}\u{216}\u{216}\u{216}\u{255}\u{215}\u{215}\u{215}\u{255}\u{216}\u{216}\u{216}\u{255}\u{218}\u{218}\u{218}\u{255}\u{214}\u{214}\u{214}\u{255}\u{206}\u{206}\u{206}\u{255}\u{203}\u{203}\u{203}\u{255}\u{214}\u{214}\u{214}\u{255}\u{218}\u{218}\u{218}\u{255}\u{212}\u{212}\u{212}\u{255}\u{211}\u{211}\u{211}\u{255}\u{216}\u{216}\u{216}\u{255}\u{215}\u{215}\u{215}\u{255}\u{208}\u{208}\u{208}\u{255}\u{200}\u{200}\u{200}\u{255}\u{207}\u{207}\u{207}\u{255}\u{214}\u{214}\u{214}\u{255}\u{217}\u{217}\u{217}\u{255}\u{214}\u{214}\u{214}\u{255}\u{210}\u{210}\u{210}\u{255}\u{209}\u{209}\u{209}\u{255}\u{209}\u{209}\u{209}\u{255}\u{212}\u{212}\u{212}\u{255}\u{223}\u{223}\u{223}\u{255}\u{222}\u{222}\u{222}\u{255}\u{208}\u{208}\u{208}\u{255}\u{207}\u{207}\u{207}\u{255}\u{218}\u{218}\u{218}\u{255}\u{221}\u{221}\u{221}\u{255}\u{213}\u{213}\u{213}\u{255}...
item: string (application/x-moz-file-promise)
application/x-moz-file-promise
item: string (application/x-moz-file-promise-url)
https://leisegedanken.de/assets/img-cache/pages/misty-morning-drive.550b7136.jpg
item: string (application/x-moz-file-promise-dest-filename)
misty-morning-drive.550b7136.jpg

Hope that helps!