reactjstypescriptfilerusttauri

Tauri Plugin dialog not found


Good afternoon, I'm new to tauri and rust in general, I'm using react as front-end and I'm trying to retrieve all the files inside a directory.

So far I've read that I should use the open function in the '@tauri-apps/plugin-dialog' plugin explained at this link: https://v2.tauri.app/plugin/dialog/#_top, but everytime I try to call the open function I endup in an error: plugin dialog not found.

I've read that I should allow dialog permission in the tauri.conf.json, but after allowing it I still have the same problem and I'm not totally sure that was the problem at all but is the most common I found browsing online.

My react app file (very basic):

import { useRef, useState } from 'react';
import { open } from '@tauri-apps/plugin-dialog';
import { invoke } from '@tauri-apps/api/core';
import './App.css';

function App() {
    const [selectedFolder, setSelectedFolder] = useState<string | null>(null);
    const [message, setMessage] = useState<string>('');

    const handleSelectFolder = async () => {
        setMessage('Opening folder dialog...');
        try {
            const selected = await open();
            if (Array.isArray(selected)) {
                // user selected multiple directories
            } else if (selected === null) {
                // user cancelled the selection
            } else {
                // user selected a single directory
                setSelectedFolder(selected);
            }
        } catch (error) {
            console.error('Errore durante la selezione della cartella:', error);
            setMessage(`Errore: ${error}`);
        }
    };

    return (
        <div className="container">
            <h1>Processa File Excel</h1>
            <button onClick={handleSelectFolder}>Cerca Cartella</button>

            {selectedFolder && (
                <p>
                    Cartella selezionata: <strong>{selectedFolder}</strong>
                </p>
            )}

            {message && <p>{message}</p>}
        </div>
    );
    }
    
    export default App;

I used the library example for the open() function.

I also tried to call the function with her parameters

open({
  multiple: false,
  directory: false,
});

this is my main.rs:

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
    file_manipulation_lib::run()
}

My lib.rs:

use tauri_plugin_dialog::{DialogExt, MessageDialogButtons, MessageDialogKind};

#[tauri::command]
fn test(folder_path: String) -> String {
    format!("prova")
}

#[tauri::command]
fn process_excel_command(folder_path: String) -> String {
    // let answer = app.dialog()
    //     .message("Tauri is Awesome")
    //     .title("Tauri is Awesome")
    //     .buttons(MessageDialogButtons::OkCancelCustom("Absolutely", "Totally"))
    //     .blocking_show();
    format!("prova")
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![test, process_excel_command])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

In here I'm not doing nothing at the moment, I just write it in case I wrote some mistakes that could help find out the problem.

My tauri.conf.json:

{
    "$schema": "https://schema.tauri.app/config/2",
    "productName": "file-manipulation",
    "version": "0.1.0",
    "identifier": "com.file-manipulation.app",
    "build": {
        "beforeDevCommand": "npm run dev",
        "devUrl": "http://localhost:1420",
        "beforeBuildCommand": "npm run build",
        "frontendDist": "../dist"
    },
    "app": {
        "windows": [
            {
                "title": "file-manipulation",
                "width": 800,
                "height": 600
            }
        ],
        "security": {
            "csp": null
        }
    },
    "plugins": {
        "dialog": { "all": true },
        "allowlist": {
            "dialog": {
                "all": true,
                "ask": true,
                "confirm": true,
                "message": true,
                "open": true,
                "save": true
            }
        }
    },
    "bundle": {
        "active": true,
        "targets": "all",
        "icon": ["icons/32x32.png", "icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico"]
    }
}

I've left both the "dialog": { "all": true } and the allowlist 'cause browsing on internet I found both were some solutions for other people.

I'm also using Tauri v2 and my operating system is Windows.

Thank you very much in advance and I hope I haven't broke any stackOverflow rule.


Solution

  • You are missing the initialization:

    .plugin(tauri_plugin_dialog::init())