[v2]How to get the path of a file or a directory?

[Bicheka]

I have this set up but it get an error Failed to resolve import "@tauri-apps/plugin-dialog" ... Does the file exist?

import { open } from "@tauri-apps/plugin-dialog";
const FilePicker = () => {
  const [selectedPath, setSelectedPath] = useState("");

  const selectFileOrFolder = async () => {
    try {
      // Open the file/folder picker dialog
      const path = await open({
        directory: true, // Set to `true` if you want to select a folder
        multiple: false, // Set to `true` if you want to select multiple files
      });

      // Set the selected path
      if (path) {
        setSelectedPath(path);
      }
    } catch (error) {
      console.error("Error selecting file/folder:", error);
    }
  };

  return (
    <div>
      <button onClick={selectFileOrFolder}>Select File/Folder</button>
      {selectedPath && <p>Selected Path: {selectedPath}</p>}
    </div>
  );
};

export default FilePicker;

I tried to understand the documentation on how to do this but it is not very clear for me how to set up the permissions and also how to add this plugin

[FabianLars]

Can you check whether @tauri-apps/plugin-dialog is really in your package.json file? Maybe re-run npm/yarn/pnpm install ?

[Bicheka]

I managed the dependency adding it manually with "@tauri-apps/plugin-dialog": "github:tauri-apps/tauri-plugin-dialog#v2" and adding tauri-plugin-dialog = "2.0.0-rc" to cargo.toml now the error is different FilePicker.jsx:19 Error selecting file/folder: dialog.open not allowed. Permissions associated with this command: dialog:allow-open, dialog:default I tried to read the docs but I don't get it

[FabianLars]

there should be a json file in src-tauri/capabilities - if you open it there will be a permissions array. Just add "dialog:default" to that array.

[Bicheka]

When I added the the permission it keeps saying that plugin dialog not found, I have no idea why this plug in does not work. Do you know if there is another way to access the file system, to be more specific I want users to be able to choose a file path or directory that they are going to be exposing in an api so other people can see those files and download them. I am still wondering how am I going to make it work for mobiles using tauri. Please let me know if you have any advice

[FabianLars]

Yeah you'll need the dialog plugin, especially for mobile support.

Did you ever run npm run tauri add dialog like shown in the setup section here? https://v2.tauri.app/plugin/dialog/#setup
If that also failed, please click on the Manual tab in the link and follow the instructions. The rust crate is required even if you do not use rust apis yourself as they power the js apis under the hood.

[Bicheka]

I managed to make it work by manually setting it up, appreciate the help sir. Btw do you know if there is a way to make it work for mobile? I tried to run the same code that works for windows on android and I got this I understand that the file system for mobile works a little bit different but there should be a way to acces the phone files/folders. 09-25 19:55:49.171 6676 6676 E Tauri/Console: File: http://tauri.localhost/src/components/FilePicker.jsx - Line 35 - Msg: Error selecting file/folder: Folder picker is not implemented on mobile 09-25 19:55:49.179 6676 6698 W om.fileflow.app: ApkAssets: Deleting an ApkAssets object '<empty> and /data/app/~~3CvMZ9_rjEJ_FbBR8EAtgQ==/com.google.android.webview-bNDpIStijsyLl2DwY9gRRQ==/WebViewGoogle.apk' with 2 weak references. It works of I change directory to false

      const path = await open({
        directory: false, // Set to `true` if you want to select a folder
        multiple: false, // Set to `true` if you want to select multiple files
      });

[FabianLars]

Yeah, as the error says, we just didn't implement the folder picker yet. It's tracked here tauri-apps/plugins-workspace#933