Cannot Drag and Drop Images

[fitzagard]

Describe the bug
The Excalidraw plugin prevents the native drag-n-drop functionality of images into Obsidian. However, drag-n-drop into the excalidraw canvas works. This may be related to #283

To Reproduce
Steps to reproduce the behavior:

1. Enable Excalidraw
2. Open a regular md file
3. Try to drag an image from desktop to regular Obsidian .md file
4. Image is not accepted

Expected behavior
The image should be automatically embedded into md file. If excalidraw is disabled drag-n-drop works as expected

Desktop (please complete the following information):

• OS: macOS Monterey
• Obsidian Version v0.13.12
• Installer version v0.12.3

[zsviczian]

I was able to reproduce the issue. I am in the middle of some changes with Excalidraw... which means it will take a couple of days before I am able to release a fix for this.

Thanks for raising the issue!

[zsviczian]

Fixed with: excalidraw/excalidraw#4445 waiting for deployment

[zsviczian]

fixed in 1.5.4

[fitzagard]

Thanks for such a fast turnaround fix for the bug! Awesome work!

[miluoshi]

@zsviczian This is happening for me again in the latest version.

I can't drag-n-drop any image or drawing from file explorer using CMD + drop (MacOS).
When I drag-n-drop without CMD, it includes a link to a file in the drawing, but CMD does nothing.

If I type ![[filename]] for any existing image file in the drawing and turn on preview mode, file contents as text instead of original image are displayed.
I've tried it with svg, png and excalidraw files.

Desktop (please complete the following information):

OS: macOS Monterey
Obsidian Version v0.13.24
Installer version v0.12.5
Excalidraw version: 1.6.5
Theme: Default
All other plugins turned off and Obsidian restarted before testing.

[zsviczian]

Did it work before 1.6.5?
Did you install any other Obsidian plugins in the meantime?
Can you try turning off the other plugins to see if the issue is not caused by another plugin?

[miluoshi]

OS: macOS Monterey
Obsidian Version v0.13.24
Installer version v0.12.5
Excalidraw version: 1.6.5
Theme: Default
All other plugins turned off and Obsidian restarted before testing.

I've tried it with other plugins turned off.

Did it work before 1.6.5?

I don't remember, I think I haven't tried it in previous versions. Do you want me to test it in older version?

[zsviczian]

Just to confirm, when all the plugins were off, you still weren't able to drag and drop.
Try dragging and only pressing cmd right before dropping the image. Does that help?

Regarding your previous comment:
The ![[filename]] does not work for images in Excalidraw.

Does the command palette action: Excalidraw: Insert image from vault work for you?

[miluoshi]

Just to confirm, when all the plugins were off, you still weren't able to drag and drop. Try dragging and only pressing cmd right before dropping the image. Does that help?

Yes, that is correct. I'm attaching a screen recording here: https://imgur.com/a/v513raG
First I've just drag-n-dropped excalidraw drawing without holding cmd - it correctly inserted Excalidraw link. Then while holding cmd (red circle around cursor), nothing happens. The same happens with images.

Regarding your previous comment: The ![[filename]] does not work for images in Excalidraw.

I didn't know this, thank you.

Does the command palette action: Excalidraw: Insert image from vault work for you?

This actually works for both images and drawings.

[zsviczian]

1. Do you see any errors on the developer console? cmd+ option + i

2. Can you also confirm that you get null as the result when you execute the following command in the developer console:
   ExcalidrawAutomate.onDropHook
   

[miluoshi]

1. No errors in console
2. Yes, it's null

[zsviczian]

I am starting to run out of ideas... we may end up having to do a short zoom call over the weekend.

Does drag&drop work in other parts of Obsidian? e.g. dropping a file from file explorer into a markdown document?
What happens if you create a blank Vault with Excalidraw. Does drag&drop work in that case?

[miluoshi]

Thanks for your help, by the way!

I'll try it once more with clean Obsidian installation and blank Vault. Just to be sure that I'm testing it correctly: I should be able to drag&drop both Excalidraw drawings and supported image files (e.g. jpg, png) while holding cmd on Mac into Excalidraw canvas to embed those images, right?

Does drag&drop work in other parts of Obsidian? e.g. dropping a file from file explorer into a markdown document?

It works in markdown documents - dropping another md file inserts a wikilink and dropping of an image embeds it with ![[ ]] link in the document.

[zsviczian]

Please execute this command in Developer Console:
ExcalidrawAutomate.onDropHook = (data) => console.log(data, {meta: data.event.metaKey, ctrl: data.event.ctrlKey, alt: data.event.altKey, shift: data.event.shiftKey});

Then try to CMD + Drop a file into Excalidraw

Then do a screenshot, opening the result set as you see on screenshot below
i.e. not this:

but this:

[zsviczian]

@miluoshi, I wanted to follow up on your issue. Let me know if you need any help with the debug instructions from 3 days ago.

[miluoshi]

@zsviczian sorry, I was busy in last days.

I've tried it with blank Vault. On drop without CMD, the onDropHook logs some data, but while holding CMD, there's no drop event. I've tried document.ondrop event handler with document.ondrop = (e) => console.log(e), but it is not fired at all on CMD + drop.

It seems like either Obsidian, or maybe some system settings prevent drop event while holding CMD. I'll try it once more with new MacOS user.

EDIT: The same behaviour is on a new MacOS user so I don't think it is influenced by something outside Obsidian.

[miluoshi]

I found this in Discord:

Licat: Yeah... It's stupid but Apple decided that we can't handle modifier+drag ourselves
They do something for us and we never get the event that the drop happens
Yeah in my testing only shift you can hold while dropping so we can get the event, sometimes ctrl. Command and option are both hooked for some system level action which doesn't do anything for us
https://discord.com/channels/686053708261228577/716028884885307432/812539048816017431

That would explain why drop didn't work for me at all with cmd modifier key. Maybe dropping images/drawings into canvas never worked for Obsidian in Macos...

[zsviczian]

So we have two options. I can change CMD to SHIFT, then it will be shift drag.
I can also write a short script and place it in the script store to convert links to images. i.e. you drop a link to a file, and then press a hotkey and it is converted in to an image.

Before I implement the SHIFT option, it would be great if you could do the testing explained above. Please do the testing 3 times. Holding in one case the SHIFT, in the other the CTRL, and finally the CMD button. Please send me the 3 result screenshots from developer console.

[miluoshi]

Here are payloads for CTRL+drop and SHIFT+drop. For CMD and ALT modifier keys there is no event received. In order to be able to use CTRL modifier key, it has to be pushed after drag event, otherwise CTRL+left mouse opens context menu in file explorer. Also SHIFT+drag does not work in this order. It has to be first drag and then SHIFT.

Using SHIFT to insert images would be great solution.