file:// not allowed to load local resource

[rafma0]

hey, is there any way I can use file:// to load pics / videos?

In electron it works after I do this

  protocol.registerFileProtocol('file', (request, callback) => {
    const pathname = decodeURI(request.url.replace('file:///', ''));
    callback(pathname);
  });

I have a external config file where the user defines a local path and I need to show the pics inside, etc

this is one of the few reasons I'm still stuck with electron and I can't wait to migrate 😃

thank you

[niemes]

Up, same problem.

I would like to change the source of a videoPlayer and end up with this error/limitation.
Any solution or documentation to load local file ?

Thank you

EDIT

We should also mention that we need to add the :asset protocole in the csp for this to work normally.
in the file tauri.conf.json add in the csp key "asset:"

I find the way to use local file, you need to get the link from the api like that :
source : Doc Tauri

      window.__TAURI__.dialog.open().then( (localPath) => {
        console.log("Video selected", localPath)
        
        let apiPath = window.__TAURI__.tauri.convertFileSrc(localPath)
        console.log('API Path', apiPath)
        window.videoPlayer.src = apiPath
        window.videoPlayer.play()
      })

have fun o/

[GregJFlores]

If someone was stuck like me with react i will leave this comment here.

I added this configs in my tauri.conf.json:

"path": {
  "all": true
},
"fs": {
  "all": true,
  "scope": [
    "**"
  ]
},
"protocol": {
  "asset": true,
  "assetScope": ["**"]
}

And then in the file dialog i did this:

//The imports you need
import { open } from "@tauri-apps/api/dialog"
import { convertFileSrc } from '@tauri-apps/api/tauri';

async function selectImage() {

  const selected = await open({
    multiple: false,
    filters: [{
      name: "Images",
      extensions: ["png", "webp", "jpg", "jpeg"]
    }]
  });

  if (selected !== null) {

    setSelectedImagePath(convertFileSrc(selected));
    console.log(selectedImagePath)
  }
}

Then just make something like this in your image:

<img src={selectedImagePath} className="h-200"></img>

I am impressed how i didn't found something so simple :3

You are a life saver

[ShiroAky]

Thank you very much, I can now solve the problem in my application thanks to your explanation.

[alishefaee]

If someone was stuck like me with react i will leave this comment here.
I added this configs in my tauri.conf.json:

"path": {
  "all": true
},
"fs": {
  "all": true,
  "scope": [
    "**"
  ]
},
"protocol": {
  "asset": true,
  "assetScope": ["**"]
}

Is this solution for version 1? How can we achieve this in v2?

[lighttigerXIV]

If someone was stuck like me with react i will leave this comment here.
I added this configs in my tauri.conf.json:

"path": {
  "all": true
},
"fs": {
  "all": true,
  "scope": [
    "**"
  ]
},
"protocol": {
  "asset": true,
  "assetScope": ["**"]
}

Is this solution for version 1? How can we achieve this in v2?

This works for me in v2. I had quite the trouble finding this out at the time XD:

"app": {
  "security": {
    "csp": null,
    "assetProtocol": {
      "enable": true,
      "scope": {
        "requireLiteralLeadingDot": false,
        "allow": ["**/*"]
      }
    }
  }
}

[alishefaee]

From discord channel I got this help:
https://tauri.app/reference/javascript/api/namespacecore/#convertfilesrc
example:

<img
  src={convertFileSrc('F://element-v4//images//train-temp//19-12-06-29-6.jpg')}
  // src="file:///F:/element-v4/images/train-temp/19-12-06-29-6.jpg"
  alt="image didn't load"
  style={{
    height: "auto",
    width: "94%",
    borderStyle: "solid",
    borderWidth: "1px",
    borderColor: "grey",
  }}
/>

in setup method I should add my path to the scope:

            let conn = get_connection();
            let setting_service = SettingService::new(conn);
            match setting_service.find_one(&SettingEnum::BasePath) {
                Ok(setting_option) => {
                    if let Some(setting) = setting_option {
                        if let Some(path_str) = setting.value.as_str() {
                            let path_buf = PathBuf::from(path_str);
            
                            // Configure both scopes with the path
                            app.asset_protocol_scope()
                                .allow_directory(&path_buf, true)?;
                            app.fs_scope()
                                .allow_directory(&path_buf, true)?;
                        } else {
                            eprintln!("BasePath setting is not a string");
                        }
                    } else {
                        println!("No base path setting found in database");
                    }
                }
                Err(err) => {
                    // Handle database query error
                    eprintln!("Error querying base path setting: {}", err);
                }
            }