chore(example): Improve dialog/fs mobile examples

examples/api/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=0"
     />
     <title>Svelte + Vite App</title>
   </head>

examples/api/src-tauri/capabilities/base.json

@@ -68,12 +68,18 @@
     "fs:allow-rename",
     "fs:allow-mkdir",
     "fs:allow-remove",
+    "fs:allow-stat",
+    "fs:allow-fstat",
+    "fs:allow-lstat",
     "fs:allow-write-text-file",
     "fs:scope-download-recursive",
     "fs:scope-resource-recursive",
     {
       "identifier": "fs:scope-appdata-recursive",
       "allow": [
+        {
+          "path": "$APPDATA/db/"
+        },
         {
           "path": "$APPDATA/db/**"
         }

examples/api/src/views/FileSystem.svelte

@@ -1,178 +1,203 @@
 <script>
-  import * as fs from "@tauri-apps/plugin-fs";
-  import { convertFileSrc } from "@tauri-apps/api/core";
-  import { arrayBufferToBase64 } from "../lib/utils";
-
-  export let onMessage;
-  export let insecureRenderHtml;
-
-  let path = "";
-  let img;
-  let file;
-  let renameTo;
-  let watchPath = "";
-  let watchDebounceDelay = 0;
-  let watchRecursive = false;
-  let unwatchFn;
-  let unwatchPath = "";
+  import * as fs from '@tauri-apps/plugin-fs'
+  import * as os from '@tauri-apps/plugin-os'
+  import { convertFileSrc } from '@tauri-apps/api/core'
+  import { arrayBufferToBase64 } from '../lib/utils'
+  import { onMount } from 'svelte'
+
+  export let onMessage
+  export let insecureRenderHtml
+
+  let path = ''
+  let img
+  let file
+  let renameTo
+  let watchPath = ''
+  let watchDebounceDelay = 0
+  let watchRecursive = false
+  let unwatchFn
+  let unwatchPath = ''
+
+  let isMobile
+  onMount(async () => {
+    let platform = await os.platform()
+    isMobile = platform === 'android' || platform === 'ios'
+  })
 
   function getDir() {
-    const dirSelect = document.getElementById("dir");
-    return dirSelect.value ? parseInt(dir.value) : null;
+    const dirSelect = document.getElementById('dir')
+    return dirSelect.value ? parseInt(dir.value) : null
   }
 
   const DirOptions = Object.keys(fs.BaseDirectory)
     .filter((key) => isNaN(parseInt(key)))
-    .map((dir) => [dir, fs.BaseDirectory[dir]]);
+    .map((dir) => [dir, fs.BaseDirectory[dir]])
 
   function open() {
     fs.open(path, {
       baseDir: getDir(),
       read: true,
       write: true,
-      create: true,
+      create: true
     })
       .then((f) => {
-        file = f;
-        onMessage(`Opened ${path}`);
+        file = f
+        onMessage(`Opened ${path}`)
       })
-      .catch(onMessage);
+      .catch(onMessage)
   }
 
   function mkdir() {
-    fs.mkdir(path, { baseDir: getDir() })
+    fs.mkdir(path, { baseDir: getDir(), recursive: true })
       .then(() => {
-        onMessage(`Created dir ${path}`);
+        onMessage(`Created dir ${path}`)
       })
-      .catch(onMessage);
+      .catch(onMessage)
   }
 
   function remove() {
     fs.remove(path, { baseDir: getDir() })
       .then(() => {
-        onMessage(`Removed ${path}`);
+        onMessage(`Removed ${path}`)
       })
-      .catch(onMessage);
+      .catch(onMessage)
   }
 
   function rename() {
     fs.rename(path, renameTo, {
       oldPathBaseDir: getDir(),
-      newPathBaseDir: getDir(),
+      newPathBaseDir: getDir()
     })
       .then(() => {
-        onMessage(`Renamed ${path} to ${renameTo}`);
+        onMessage(`Renamed ${path} to ${renameTo}`)
       })
-      .catch(onMessage);
+      .catch(onMessage)
   }
 
   function truncate() {
     file
       .truncate(0)
       .then(() => {
-        onMessage(`Truncated file`);
+        onMessage(`Truncated file`)
+      })
+      .catch(onMessage)
+  }
+
+  function write() {
+    const encoder = new TextEncoder()
+    file
+      .write(encoder.encode('Hello from Tauri :)'))
+      .then(() => {
+        onMessage(`wrote to file`)
       })
-      .catch(onMessage);
+      .catch(onMessage)
   }
 
   function stat() {
     file
       .stat()
       .then((stat) => {
-        onMessage(`File stat ${JSON.stringify(stat)}`);
+        onMessage(`File stat ${JSON.stringify(stat)}`)
       })
-      .catch(onMessage);
+      .catch(onMessage)
   }
 
   function read() {
     const opts = {
-      baseDir: getDir(),
-    };
+      baseDir: getDir()
+    }
     fs.stat(path, opts)
       .then((stat) => {
-        const isFile = stat.isFile;
+        const isFile = stat.isFile
 
         const promise = isFile
           ? fs.readFile(path, opts)
-          : fs.readDir(path, opts);
+          : fs.readDir(path, opts)
         promise
           .then(function (response) {
             if (isFile) {
-              if (path.includes(".png") || path.includes(".jpg")) {
+              if (path.includes('.png') || path.includes('.jpg')) {
                 arrayBufferToBase64(
                   new Uint8Array(response),
                   function (base64) {
-                    const src = "data:image/png;base64," + base64;
-                    insecureRenderHtml('<img src="' + src + '"></img>');
+                    const src = 'data:image/png;base64,' + base64
+                    insecureRenderHtml('<img src="' + src + '"></img>')
                   }
-                );
+                )
               } else {
-                const value = String.fromCharCode.apply(null, response);
+                const value = String.fromCharCode.apply(null, response)
                 insecureRenderHtml(
                   '<textarea id="file-response"></textarea><button id="file-save">Save</button>'
-                );
+                )
                 setTimeout(() => {
-                  const fileInput = document.getElementById("file-response");
-                  fileInput.value = value;
+                  const fileInput = document.getElementById('file-response')
+                  fileInput.value = value
                   document
-                    .getElementById("file-save")
-                    .addEventListener("click", function () {
+                    .getElementById('file-save')
+                    .addEventListener('click', function () {
                       fs.writeTextFile(path, fileInput.value, {
-                        dir: getDir(),
-                      }).catch(onMessage);
-                    });
-                });
+                        dir: getDir()
+                      }).catch(onMessage)
+                    })
+                })
               }
             } else {
-              onMessage(response);
+              onMessage(response)
             }
           })
-          .catch(onMessage);
+          .catch(onMessage)
       })
-      .catch(onMessage);
+      .catch(onMessage)
   }
 
   function setSrc() {
-    img.src = convertFileSrc(path);
+    img.src = convertFileSrc(path)
   }
 
   function watch() {
-    unwatch();
+    unwatch()
     if (watchPath) {
-      onMessage(`Watching ${watchPath} for changes`);
+      onMessage(`Watching ${watchPath} for changes`)
       let options = {
         recursive: watchRecursive,
-        delayMs: parseInt(watchDebounceDelay),
-      };
+        delayMs: parseInt(watchDebounceDelay)
+      }
       if (options.delayMs === 0) {
         fs.watchImmediate(watchPath, onMessage, options)
           .then((fn) => {
-            unwatchFn = fn;
-            unwatchPath = watchPath;
+            unwatchFn = fn
+            unwatchPath = watchPath
           })
-          .catch(onMessage);
+          .catch(onMessage)
       } else {
         fs.watch(watchPath, onMessage, options)
           .then((fn) => {
-            unwatchFn = fn;
-            unwatchPath = watchPath;
+            unwatchFn = fn
+            unwatchPath = watchPath
           })
-          .catch(onMessage);
+          .catch(onMessage)
       }
     }
   }
 
   function unwatch() {
     if (unwatchFn) {
-      onMessage(`Stopped watching ${unwatchPath} for changes`);
-      unwatchFn();
+      onMessage(`Stopped watching ${unwatchPath} for changes`)
+      unwatchFn()
     }
-    unwatchFn = undefined;
-    unwatchPath = undefined;
+    unwatchFn = undefined
+    unwatchPath = undefined
   }
 </script>
 
 <div class="flex flex-col">
+  {#if isMobile}
+    <div>
+      On mobile, paths outside of App* paths require the use of dialogs
+      regardless of Tauri's scope mechanism.
+    </div>
+    <br />
+  {/if}
   <div class="flex gap-1">
     <select class="input" id="dir">
       <option value="">None</option>
@@ -200,6 +225,7 @@
   </div>
   {#if file}
     <div>
+      <button class="btn" on:click={write}>Write</button>
       <button class="btn" on:click={truncate}>Truncate</button>
       <button class="btn" on:click={stat}>Stat</button>
     </div>