#How to save an image from a blob URL? (SolidJS and TypeScript)

14 messages · Page 1 of 1 (latest)

limber dome
#

So I wanna have this app make a copy of an image whenever a user uploads said image. Right now, I’m having it create a blob URL whenever the image is uploaded. How do I make a copy of the image using that? I’m currently using TypeScript and SolidJS for the front-end. Thank you!

#

How to save an image from a blob URL? (SolidJS and TypeScript)

glass cave
#

Do you mean a copy that you save to disk? Can't you just use tauri's writeFile api with blob.arrayBuffer() or blob.bytes() or blob.stream() ? (stream() requires the very latest versions of the fs plugin)

limber dome
# 
            const imagesDir = `images`;
            const deckDir = deckName;
            const filePath = `${imagesDir}/${fileName}`;
    
            // Check and create directory if not exists
            const dirExists = await fs.exists(imagesDir);
            if (!dirExists) {
                await fs.mkdir(imagesDir, { baseDir: fs.BaseDirectory.AppLocalData });
            }
#

I had it print the error, and it says "forbidden path: images"

#

These are my permissions:

  "permissions": [
    "core:default",
    "shell:allow-open",
    "fs:default",
    "shell:default",
    "dialog:default",
    "dialog:default"
  ]
glass cave
limber dome
# glass cave you also need to configure scopes unless you use the dialog to select the target...

So I did that, and it's still not working for some reason. It's still giving me the same error.

  "identifier": "migrated",
  "description": "permissions that were migrated from v1",
  "local": true,
  "windows": [
    "main"
  ],
  "permissions": [
    "core:default",
    "shell:allow-open",
    "fs:default",
    "fs:allow-open",
    "fs:allow-write",
    "fs:allow-read",
    "fs:allow-rename",
    "fs:allow-mkdir",
    "fs:allow-remove",
    "fs:allow-write-text-file",
    "fs:scope-download-recursive",
    "fs:scope-resource-recursive",
    {
      "identifier": "fs:scope",
      "allow": [{ "path": "$APPLOCALDATA" }]
    },
    "shell:default",
    "dialog:default"
  ]
}```

I also did some research and added the setup to my rust main code, but it's still not working..

```    tauri::Builder::default()
        .setup(|app| {
            let path = app.path().app_data_dir().expect("This should never be None");
            let path = path.join(".images/");

            create_dir_all(&path);

            Ok(())
        })
        .plugin(tauri_plugin_dialog::init())
        .plugin(tauri_plugin_shell::init())
        .plugin(tauri_plugin_fs::init())
        .invoke_handler(tauri::generate_handler![
            /*REDACTED*/
        ])
        .on_window_event(|window, event| {
            if let WindowEvent::CloseRequested { .. } = event {
                // Perform the save action here
                if let Err(e) = save_to_disk() {
                    eprintln!("Failed to save data to disk: {}", e);
                }
            }
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
glass cave
#

you only allowed the applocaldata folder itself but not its contents, try this json { "identifier": "fs:scope", "allow": [{ "path": "$APPLOCALDATA" }, { "path": "$APPLOCALDATA/**" }] }, (maybe has to be **/* - the behavior changed in some places compared to v1)

limber dome
#

Updated migrated.json file:

{
  "identifier": "migrated",
  "description": "permissions that were migrated from v1",
  "local": true,
  "windows": [
    "main"
  ],
  "permissions": [
    "core:default",
    "shell:allow-open",
    "fs:default",
    "fs:allow-open",
    "fs:allow-write",
    "fs:allow-read",
    "fs:allow-rename",
    "fs:allow-mkdir",
    "fs:allow-remove",
    "fs:allow-write-text-file",
    "fs:scope-download-recursive",
    "fs:scope-resource-recursive",
    {
      "identifier": "fs:scope",
      "allow": [{ "path": "$APPLOCALDATA" }, {"path": "$APPLOCALDATA/*" }]
    },
    "shell:default",
    "dialog:default"
  ]
}
limber dome
# glass cave you only allowed the applocaldata folder itself but not its contents, try this `...

So I figured this out, and it's saving the file now, thankfully! However, the image does not seem to be displaying. Would you happen to know how to display the image from the AppData folder?

URL setting:

            const appDataPath = await appDataDir();
            const localPath = `images/New Deck-0.jpeg`; // Relative path from AppData
            const fullPath = appDataPath + "/" + localPath;
            setFileURL(fullPath.replace(/\\/g, "/"));```

img tag:
```                                                <img ref={(el) => (imageRef = el)} src={fileURL()} style="max-width: 100%; position: absolute; top: 0; left: 0;" onLoad={onImageLoad}/>```
glass cave