Drag file from pc folder to Tauri app

[geeklibin]

Hi guys.
I want drag file to tauri app and upload file but can't drag file to tauri app.

[abisar]

The native web drop event doesn't work. But tauri has some events for file drop that you can register and listen to. Here is an example.

[abisar]

It's also possible to capture drop on html elements. It just needs a js workaround. Put mouseenter/mouseleave events on the element and only handle tauri file-drop event if the mouse is on your desired element. From here

[FabianLars]

Yep that's the way, we don't have enough control about the webview to implement it like normal browsers do (at least to our knowledge).
That said, there may be problems, because the webview (idk on which OS) doesn't receive the mouse position when i file is dragged, for whatever reason :/

[kerwin612]

@FabianLars Hello, I have a bug here. Can you help me take a look at it when you have time?
I refer to the example mentioned in this answer. I use file-drop event in my program. However, it only works properly in WIN10. It cannot accept file drag in WIN11. Is this a known BUG?
This is my code: https://github.com/kerwin612/PortableRunner/blob/c6cc39d9154e591b76f5e473ddc2e7e8b923360e/src/main.js#L193

Run on WIN10 as follows:

Run on WIN11 as follows:

[saverioscagnoli]

I had the same problem for 3 days straight. I discovered that, since I was launching the app from an administrator terminal, I couldn't drag files from pc the app, launching it from a non-admin terminal worked.

[liujiaqi]

My app need to run as administrator. What should I do🙁
No way for limited by UAC🤦‍ https://superuser.com/a/59106

I had the same problem for 3 days straight. I discovered that, since I was launching the app from an administrator terminal, I couldn't drag files from pc the app, launching it from a non-admin terminal worked.

[salmenf]

To continue this topic: I tried implementing the approach of the other answer. The workaround @abisar suggested works fine, I opted to use querySelector to only poll the hover state when dropping. Currently, there is a bit of async awkwardness which involves setTimeout, since if you drop, tauri://file-drop occurs first, then mouseenter etc. occurs.
I've reached a different issue: How do I get the file content? I get the path from the event. I could read it with the fs API, but this would require allowing arbitrary paths. I'd like to get the file or allow just the dragged path. Is this possible?

Registering the listener

    const {listen} = await import('@tauri-apps/api/event')

    listen('tauri://file-drop', async event => {
      await new Promise(resolve => setTimeout(resolve, 100))
      if(this.shadowRoot.querySelector("form:hover")) {
        console.log(event)
      }
    })

Value of the event

{
    "event": "tauri://file-drop",
    "windowLabel": "main",
    "payload": [
        "Path\\To\\File"
    ],
    "id": 1234
}

[FabianLars]

dropped paths get added to the allowed scope automatically.

And in case you only want the file content and don't care about the path at all, you could disable tauri's file drop implementation and use the browser's native one.

[salmenf]

Excellent, thanks for your help! Since I'm making a file input, your second tip did the trick: I disabled fileDropEnabled and used the browser's drag n' drop API.

[KrosFire]

I've created something like this, to best mimic the native behaviour. It works great for me and you can easily extend it to your needs

class DropEvent extends DragEvent {
  offsetX: number
  offsetY: number

  constructor(path: string, offsetX: number, offsetY: number) {
    super('drop', {
      dataTransfer: new DataTransfer(),
    })

    this.offsetX = offsetX
    this.offsetY = offsetY
    this.dataTransfer?.setData('text/plain', path)
  }
}

const startListeningForDragAndDropEvents = (animationsStore: AnimationsStore) => {
  const appContainer = document.getElementById('app')

  let draggedData: string | null = null
  let dropTarget: HTMLElement | null = null
  let offsetX = 0
  let offsetY = 0

  appContainer?.addEventListener('dragstart', e => {
    draggedData = e.dataTransfer?.getData('text/plain') || null
  })

  appContainer?.addEventListener('dragover', e => {
    offsetX = e.offsetX
    offsetY = e.offsetY
  })

  appContainer?.addEventListener('dragenter', e => {
    dropTarget = e.target as HTMLElement
  })

  appContainer?.addEventListener('dragend', () => {
    dropTarget = null
    draggedData = null
  })

  listen('tauri://file-drop', e => {
    let filePath = draggedData || ''

    if (Array.isArray(e.payload) && typeof e.payload[0] === 'string') {
      filePath = e.payload[0]
    }

    const dropEvent = new DropEvent(filePath, offsetX, offsetY)

    dropEvent.dataTransfer?.setData('text/plain', filePath)

    dropTarget?.dispatchEvent(dropEvent)

    dropTarget = null
    draggedData = null
  })
}

[CottonCandyZ]

For someone who needs to detect the element, I think we can use document.elementFromPoint to identify the element under the drop. React code:

import { listen } from "@tauri-apps/api/event";
import { useEffect, useRef, useState } from "react";
type TauriDragDropEvent = {
  paths: string[];
  position: {
    x: number;
    y: number;
  };
};

const useDropZone = ({ onDrop }: { onDrop: (paths: string[]) => void }) => {
  const ref = useRef<HTMLDivElement>(null);
  const [dragIn, setDragIn] = useState(false);
  useEffect(() => {
    const unlisten = listen<TauriDragDropEvent>("tauri://drag-drop", (e) => {
      const { x, y } = e.payload.position;
      if (document.elementFromPoint(x, y) === ref.current) {
        onDrop(e.payload.paths);
        setDragIn(false);
      }
    });
    return () => {
      unlisten.then((unlisten) => {
        unlisten();
      });
    };
  }, [onDrop]);
  useEffect(() => {
    const unlisten = listen<TauriDragDropEvent>("tauri://drag-over", (e) => {
      const { x, y } = e.payload.position;
      if (document.elementFromPoint(x, y) === ref.current) {
        setDragIn(true);
      } else {
        setDragIn(false);
      }
    });
    return () => {
      unlisten.then((unlisten) => {
        unlisten();
      });
    };
  }, []);
  return { ref, dragIn };
};

export { useDropZone };