File drop changes in v2

[analog plover]

Hi all.

I was using the file drop ability in v1:

`const unlistener = listen("tauri://file-drop", handleFileDrop);

const handleFileDrop = async (event: any) => {

const handleDrop = (e: DragEvent) => {
const handleDragOver = (e: DragEvent) => {
const handleDragEnter = (e: DragEvent) => {
const handleDragLeave = (e: DragEvent) => {`

How can I update these to work with v2?

I've changed the import to:
import { open } from "@tauri-apps/plugin-dialog";

In my toml I've added (I use fs after dropping a file with the drop):

tauri-plugin-dialog = "2.0.0-rc.1" tauri-plugin-fs = "2.0.0-rc.2"

[ruby marsh]

Please check out the docs of the plugin and especially the migration guide.

https://v2.tauri.app/start/migrate/from-tauri-1/

[ruby marsh]

You have not posted an error message, nor the cargo tauri info output, so not sure where to help aside from pointing you to docs

Also v2 the event is renamed afaik https://v2.tauri.app/reference/javascript/api/namespaceevent/#drag_drop

[analog plover]

There is no error, it just listens to something that does not exist is what I am thinking. I think I have a lead. Will update with what I find.

Yes thanks. This is it. Thanks!

[analog plover]

Do you know if there are some specific permissions needed for events in js?

While the drop event works now (drag-drop on entire window), none of my other normal js events are working. Basically I have a div that has some events such as:

dropZone.addEventListener("dragenter", handleDragEnter);

Which then:

const handleDragEnter = (e: DragEvent) => { console.log("this does not trigger in v2"); e.preventDefault(); // Prevent default to allow drop setIsOverTarget(true); // Change state immediately };

These work fine in v1, so i'm assuming it's just a permissions issue.

I've tried adding these to my permissions array in my src-tauri/capabilities/default.json:

"core:event:default", "core:event:allow-emit", "core:event:allow-listen",

[ruby marsh]

Do you get errors in your console in the WebView?

core:default may be enough but not sure

[analog plover]

Nothing in my webview console. Perhaps I could somehow use the other events like DRAG_ENTER, DRAG_LEAVE etc but somehow make them only work on my dropzone div instead of on the whole window like I am doing with DRAG_DROP ? Not sure how I would go about that though.

I'll try and find some example project on github using v2 that listens to js events via event listeners

[analog plover]

Ok so I think i've mostly got it figured out.

Basically you got to use the drag-over event, and then just get the dimensions of your div and use them to determine where your cursor is in relation to your window.

[wintry cargo]

@analog plover we use filedrop on our syntax prod assistent in v2 here: https://github.com/syntaxfm/production-assistant/blob/main/src/routes/project/[id]/%2Bpage.svelte#L103

not sure if this is exactly what you are trying to do but works well for us using getCurrentWebview().onDragDropEvent

[analog plover]

Thanks for the example!

Do you know if there is much different between your way of using getCurrentWebview, vs my way of using the current window?:

` const currentWindow = Window.getCurrent();

    const unlisten = currentWindow.listen(
        "tauri://drag-drop",
        handleDragDrop
    );`