still stratus
Having trouble getting basic script import to work.
import { appWindow } from "@tauri-apps/api/window";
I'm really trying to use
import { listen } from './@tauri-apps/api/event';
do I need an importmap or something? I just see Uncaught TypeError: Failed to resolve module specifier "@tauri-apps/api/window". Relative references when I try
shell marlin
How did you initialise your project?
still stratus
i belive cargo tauri init
looking now can't see it in my history Ill recreate via the npm if that helps
import { appWindow } from "@tauri-apps/api/window";
1 appWindow.listen('tauri://file-drop', ({ event, payload }) => {console.log(event) });
2
3 //import { listen } from './@tauri-apps/api/event';
4 //listen('tauri://file-drop', event => { console.log(event) });
shell marlin
Depends on what you want to do.
still stratus
I'm trying to get a drop event
missing something basic. getting the events or the window should work 🙂
shell marlin
Will you be using a lot of JS libraries or just Vanilla JS you wrote yourself?
still stratus
i did choose vinalla. would bring in the others if needed.
suggest I try using a different preset?
i would like to do a three.js
shell marlin
You can use any preset you want. It just changes how you call the Tauri API.
The code you have above expects a JS bundler to come along and extract the code from Tauri's Node.js module.
If you don't want to use a bundler, you can configure Tauri to inject it's API onto the global window object.
still stratus
I'd prefer that it inject the api into the global object that sounds good to me. 🙂
The code samples on the website do not work in a vinilla setup as it is then. since you need a transpile from for a browser to use it?
shell marlin
You want to set src-tauri/tauri.conf.json > "build" > "withGlobalTauri": true for global injection.
shell marlin
Should be.
Where reasonable, it was assumed a bundler was used. Some pages show examples without bundlers, like the HTML example. The Tauri JS API documentation pages also list equivalent replacements at the top.
import { appWindow } from "@tauri-apps/api/window";
// becomes
const appWindow = window.__TAURI__.window.appWindow;
import { listen } from './@tauri-apps/api/event';
// becomes
const listen = window.__TAURI__.event.listen;
well thats wonderful no console log errors. drop target needs to be set still as dragging a file is showing no valid
thank you!
shell marlin
Drag-and-drop might also need more configuration.
If you need to use the native JS drag-and-drop functionality, you need to set this to false: https://tauri.app/v1/api/config#windowconfig.filedropenabled
If you're using Tauri's event handler, you shouldn't have any issues out-of-the-box.
still stratus
just set
9 "windows": [
8 {
7 "fullscreen": false,
6 "resizable": true,
5 "title": "runondrop",
4 "width": 800,
3 "height": 600,
2 "fileDropEnabled": true
1 }
45 ]
still showing not allowed icon when trying to drag a file
shell marlin
Not sure what's wrong there off the top of my head. Can I get back to you within a couple of hours? I have to head out for a bit.
still stratus
I had to turn it off to get it to work. I can't use the drop stuff included it seems
shell marlin
Yeah, Tauri's drop events are expected to be used with Tauri's APIs. They don't give you a file object you can use with common browser JS libraries.
still stratus
i have the drop stuff going. I added a new droprun just like the greet.
await window.TAURI.invoke('droprun', { files: files.map((file) => file.path) });
results in
Uncaught (in promise) command droprun not found
#[tauri::command]
async fn droprun(window: Window, state: State<'_,DropFilesArgs>) -> Result<(), String> {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![droprun])
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
tried moving it out of the index.html and into main.js trying the invoke via import too. same.
how can I be seeing great success and same thing failure.
still stratus
#[tauri::command]
//async fn droprun(window: Window, state: State<'_,DropFilesArgs>) -> Result<(), String> {
async fn droprun(args: DropFilesArgs) -> String {
tried changing the signature a few times. still nothing
one line.
.invoke_handler(tauri::generate_handler![greet, droprun])
not two. that helps!
main.js:80 Uncaught (in promise) invalid args files for command droprun: invalid type: null, expected a string
#[tauri::command]
async fn droprun(files: Vec<String>) -> String {
//async fn droprun(window: Window, state: State<'_,DropFilesArgs>) -> Result<(), String> {
for file_path in files.iter() {
println!("Dropped file: {}", file_path);
}
"".to_string()
}
hmmm so close
still stratus
boom. thanks for the help; I got it working!
lol well it was a fun thing to do but at the end of this i just realized no long path just the name....not a very good solution.
shell marlin
i have the drop stuff going. I added a new droprun just like the greet.
await w...
The invoke_handler(tauri::generate_handler![]) line should only be called once. The [] takes an infinite number of values so put each function in there.
Ah, I see you figured that one out.
still stratus
do I need to get the dropfile stuff working in tauri itself to get a full path? electronjs apparently has an extended drop target that includes the full path.
i have the listener setup and when I turn on fileDropEnabled no drop events are allowed.
"windows": [
{
"fullscreen": false,
"resizable": true,
"title": "runondrop",
"width": 800,
"height": 600,
"fileDropEnabled": true
}
]
Whether the file drop is enabled or not on the webview. By default it is enabled.
---> Disabling it is required to use drag and drop on the frontend on Windows.
https://github.com/tauri-apps/wry/issues/418 this is old as of 2022 and still doesnt look to be integrated.https://github.com/tauri-apps/wry/tree/drag-drop-webview2
shell marlin
A standard browser will give you the file name but doesn't tell you the path because you can't read or write to their filesystem arbitrarily, it all must be user-initiated actions.
Tauri's event API will give you the full path but it kind of locks you into using Tauri's FS API suite to handle the reading and writing side as well.
If you're building all your JS functionality from scratch or the library you're using allows for data input without a standard JS API File object, this isn't an issue.
shell marlin
Took a look at the three.js API and it looks like you could replace loader.load with loader.parse and then feed it the input of Tauri's fs.readBinaryFile.
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
const readBinaryFile = window.__TAURI__.fs.readBinaryFile;
const scene = new THREE.Scene();
const loader = new GLTFLoader();
let path = "path/to/model.glb"; // Path from the event here.
let contents = await readBinaryFile(path);
loader.parse(contents.buffer, path, (gltf) => {
scene.add(gltf.scene);
}, (err) => {
console.log(err);
});
Implemented it with Tauri's file drop:
const scene = new THREE.Scene();
listen("tauri://file-drop", (ev) => {
if (ev.payload instanceof Array && ev.payload.length > 0) {
ev.payload.forEach(async (path) => {
const loader = new GLTFLoader();
let contents;
try {
contents = await readBinaryFile(path);
} catch(e) {
console.log("failed to read file", path, e);
return;
}
loader.parse(contents.buffer, path, (gltf) => {
scene.add(gltf.scene);
}, (err) => {
console.log(err);
});
});
} else {
console.log("invalid payload", ev.payload);
}
});
The user is dragging the files from the explorer window to the tauri window; it would be user initiated. I will spend some time looking at the FS link.
still stratus
Implemented it with Tauri's file drop:
```js
const scene = new THREE.Scene();
l...
are you saying this works for you? three.js is not needed, I'm just looking to print a line to the console with the full path and spawn a process.
You can't use fileDropEnabled on windows and I think that should work...and wish I knew how to help get it working.
if you set it to false you can get javascript to work but no long paths. I gave up on it the other weekend and tried to do it in electron; I still want it to work using tauri.
shell marlin
A browser's built-in JS API doesn't give you the full path. It will tell you the file name, it's last modified time, and a few other things. Tauri's API gives you the full path that you're looking for.
still stratus
3 const appWindow = window.__TAURI__.window.appWindow;
2 appWindow.listen('tauri://file-drop', ({ event, payload }) => {console.log(ev
ent) });
1 const listen = window.__TAURI__.event.listen;
5 listen('tauri://file-drop', event => { console.log(event) });
I have that in my runondrop example. i would think one of them would work.
