Tauri 2.0 - Using and configuring the file-system plugin

[quick ravine]

Hello,
I'm a beginner with Tauri. I'm using Tauri 2.0 to develop an application that manipulates and stores images imported by the user. These images are imported into a folder, let's say USER_DIR. I want to authorize my application (frontend javascript) to access the USER_DIR folder.

I got interested in File System plugin : https://v2.tauri.app/plugin/file-system/ and I'm having a hard time getting it to work...
I run

$ cargo tauri add fs
    Info Installing Cargo dependency "tauri-plugin-fs"...
    Updating crates.io index
      Adding tauri-plugin-fs v2.0.0-beta.10 to dependencies
             Features:
             - notify
             - notify-debouncer-full
             - watch
    Added permission `fs:default` to `default` at /home/xxxx/src-tauri/capabilities/default.json
    Info Plugin initialization code already found on /home/xxxx/src-tauri/src/main.rs

then add in my default.json file

    "fs:default",
    {
      "identifier": "fs:allow-exists",
      "allow": [
        {
          "path": "$APPDATA/*"
        }
      ]
    }

Then in tauri.conf.json file I add

  "plugins": {
    "fs": {
      "all": true,
      "scope": [
        "$APPDATA/*",
        "$APPDATA"
      ]
    }
  }

Then within my frontend I used the example provided here https://v2.tauri.app/plugin/file-system/

import { exists, BaseDirectory } from '@tauri-apps/plugin-fs';
await exists('avatar.png', { baseDir: BaseDirectory.AppData });

and I get the following error in my frontend console:

TypeError: Module name, '@tauri-apps/plugin-fs' does not resolve to a valid URL.

Do you know what I might have missed here?
Thanks,

[indigo pasture]

you will need to install the @tauri-apps/plugin-fs package to your frontend as well. It's a separate package from the main Tauri API.

npm add @tauri-apps/plugin-fs (or the equivalent for your frontend package manager)

[quick ravine]

Thank you very much @indigo pasture for your answer!

I'm using Tauri in vanilla HTML, CSS and Javascript for now. I don't know if a frontend package manager applies here.

I tried

npm add @tauri-apps/plugin-fs

as well anyway, I didn't mention it in my previous message. It is installed but it didn't change anything.

Sorry if my question seems stupid. I guess there is somewhere something I miss or don't understand.

Maybe if I add more context.

First I followed the quick start guide and have created a simple Tauri 1 project. A few days later I updated my Ubuntu to Ubuntu 24.04 and ran into this problem : https://github.com/tauri-apps/tauri/issues/9662 so I switched to Tauri 2.0 and went through automated migration : https://v2.tauri.app/start/migrate/from-tauri-1/ Until now it was working fine and I focused on Rust development since then.

I don't know if my project is correctly configured though (since I went through the v1->v2 migration).

[indigo pasture]

so you're using npm for your frontend then? do other modules work properly?

[quick ravine]

I guess I'm using cargo since I use the vanilla template. But I'm wondering if my project is not badly configured.
I can reproduce the same setup with the following configuration : Cargo + Vanilla and it doesn't work

$ cargo create-tauri-app --beta
✔ Project name · test
✔ Choose which language to use for your frontend · Rust - (cargo)
✔ Choose your UI template · Vanilla
✔ Would you like to setup the project for mobile as well? · no

I tried with this setup and it works with Vuejs + npm

$ cargo create-tauri-app --beta
✔ Project name · test
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · Vue - (https://vuejs.org/)
✔ Choose your UI flavor · JavaScript
✔ Would you like to setup the project for mobile as well? · no

The error doesn't appear here when I add

import { exists, BaseDirectory } from '@tauri-apps/plugin-fs';

in src/components/Greet.vue

[indigo pasture]

by vanilla, do you mean "no frontend package manager" or "no frontend framework"?

[quick ravine]

no frontend package manager

[indigo pasture]

do you have a package.json?

oh

yeah

in that case, you'll want to be using the global APIs instead

[quick ravine]

no I don't

[indigo pasture]

that's why

npm add then is just gonna add stuff to your global namespace iirc, I don't remember exactly what it does tbh

but it's not part of your project

[quick ravine]

I think it is not a common setup though. I followed the quick start guide and will eventually someday switch to a real frontend framework with a package manager.

[indigo pasture]

see this line of the example: ```rs
// const { exists, BaseDirectory } = window.TAURI_PLUGIN_FS;

[indigo pasture]

in that case I would just do so now tbh

at least, the package manager

what framework were you thinking?

[indigo pasture]

actually I take that back. It depends

[quick ravine]

I don't know actually. I wanted to test some of them and then decide which one.

[indigo pasture]

but yeah, for now I'd use global tauri

[quick ravine]

skipped this line since it was commented, I'm trying it right now

[indigo pasture]

set "withGlobalTauri": true in the top level of your config

yeah, import { exists, BaseDirectory } from '@tauri-apps/plugin-fs'; assumes you're using a package, @tauri-apps/plugin-fs is the tauri API npm package

[quick ravine]

oook. I already have it. I didn't realize.

  },
  "app": {
    "withGlobalTauri": true,
    "windows": [

[indigo pasture]

nice

well, that should be it then

[quick ravine]

yes, the error disappeared from my javascript 🙂 Thank you very much, that's very kind of you to help me !

I completely missed this concept of withGlobalTauri

I chose the difficult learning path without package manager and framework, it seems it is not the most documented choice of setup.