No support for dropping files?

[scambier]

Describe the bug

I'm in the process of porting a webapp into Tauri, and I need to drop files into a text editor (it's a CodeMirror instance). This worked without issue in the browser or in Electron, but Tauri does not trigger anything when a file is dropped. Even an ondrop on the topmost div does nothing.

To Reproduce

• Implement an ondrop event on a Tauri app.
• Try to drop a file from the filesystem onto the app
• See it doesn't trigger anything

Expected behavior

The ondrop event should trigger.

Screenshots

n/a

Platform and Versions (required):

Operating System - Windows, version 10.0.19042 X64
Webview2 - 94.0.992.50

Node.js environment
  Node.js - 16.0.0
  @tauri-apps/cli - 1.0.0-beta.10
  @tauri-apps/api - 1.0.0-beta.8

Global packages
  npm - 7.10.0
  yarn - Not installed

Rust environment      
  rustc - 1.55.0
  cargo - 1.55.0

App directory structure
/.git
/.history
/.vscode
/dist
/node_modules
/public
/src
/src-tauri

App
  tauri.rs - 1.0.0-beta.8
  build-type - bundle
  CSP - default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
  distDir - ../dist
  devPath - http://localhost:3000
  framework - Vue.js

[FabianLars]

you can use tauri's listen function to register an event listener for the tauri://file-drop event.
There are also tauri://file-drop-hover and tauri://file-drop-cancelled.
They all trigger on the whole window, not on single html elements. So if you need that you have to keep track of the mouse position yourself (for example with mouseenter etc events).

[scambier]

Alright thanks 👍
It might be interesting to tweak the search results because the events list does not show up when looking for "drop" (but it does for "blur" or "drop-[something]")

[shenghan97]

Did you get this to work eventually? My app won't receive any file drop on windows. The cursor simply turned into a disabled state.

---

Edits: I figured it out that the cursor turned into disable state only happens when run the app from VS code's integrated terminal on windows. If start tauri dev in powershell it's all good. This only happens on Windows not on Mac btw. Not sure if this is fixed in stable release of Tauri.

[scambier]

@shenghan97 this works for me:

import { listen } from '@tauri-apps/api/event'

listen('tauri://file-drop', event => {
  console.log(event)
})

[evbo]

on Ubuntu 22 Tauri Dev mode latest with fileDropEnabled disabled so far I can run native dragEnter, dragOver, dragLeave and onDrop events perfectly in basic ReactJS app.. will try Tauri production and Windows later and post back here if they don't work.

[wmq-top]

I need to drag and drop the file into the webview to get the parseable file content, I am using the fs system works with the URL in the event callback now, does Tauri provide an existing API to achieve the same effect？

[sounddroid]

Does this support multiple files being drag and dropped onto the web view? And we'd get the full filepaths of each dropped file?

[FabianLars]

yes, the tauri://file-drop event shown above returns an array with all file paths.

[ThallesP]

If anyone stumble into this lost on why your dropzone input isn't working, just disable the fileDropEnabled in the windows on your tauri.config.json section.

[mcthesw]

If anyone want to set it in rust code, just read this:

let window = tauri::WindowBuilder::from_config(
                    app,
                    WindowConfig {
                        label: "main".to_string(),
                        url: tauri::WindowUrl::App("index.html".into()),
                        file_drop_enabled: false, // notice this
                        ..Default::default()
                    },
                )
                .build()
                .unwrap();

[TakenPilot]

Can confirm on OSX: disabling the fileDropEnabled in the tauri.config lets the window successfully process the file drag and drop instead.

[bmsimo]

Update for those who're using v2:
As in https://v2.tauri.app/reference/javascript/api/namespaceevent/

import { listen } from "@tauri-apps/api/event";

listen('tauri://drag-drop', event => {
  console.log(event)
})

[Skhmt]

in v2 you can set it in your tauri.conf.json by setting app.windows[0].dragDropEnabled to false