chore(example): Improve dialog/fs mobile examples (#2410)

Author: FabianLars

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,13 +68,19 @@
     "fs:allow-rename",
     "fs:allow-mkdir",
     "fs:allow-remove",
+    "fs:allow-stat",
+    "fs:allow-fstat",
+    "fs:allow-lstat",
     "fs:allow-write-text-file",
     "fs:read-meta",
     "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,8 +1,9 @@
 <script>
   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 { onDestroy } from 'svelte'
+  import { onDestroy, onMount } from 'svelte'
 
   const { onMessage, insecureRenderHtml } = $props()
 
@@ -18,6 +19,12 @@
   let baseDir = $state()
   let unwatchFn
   let unwatchPath = ''
+  let isMobile = $state(false)
+
+  onMount(() => {
+    let platform = os.platform()
+    isMobile = platform === 'android' || platform === 'ios'
+  })
 
   const dirOptions = Object.keys(fs.BaseDirectory).filter((key) =>
     isNaN(parseInt(key))
@@ -38,7 +45,7 @@
   }
 
   function mkdir() {
-    fs.mkdir(path, { baseDir })
+    fs.mkdir(path, { baseDir, recursive: true })
       .then(() => {
         onMessage(`Created dir ${path}`)
       })
@@ -73,6 +80,16 @@
       .catch(onMessage)
   }
 
+  function write() {
+    const encoder = new TextEncoder()
+    file
+      .write(encoder.encode('Hello from Tauri :)'))
+      .then(() => {
+        onMessage(`wrote to file`)
+      })
+      .catch(onMessage)
+  }
+
   function stat() {
     file
       .stat()
@@ -180,6 +197,13 @@
 </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" bind:value={baseDir}>
       <option value={undefined} selected>None</option>
@@ -207,6 +231,7 @@
   </div>
   {#if file}
     <div>
+      <button class="btn" onclick={write}>Write</button>
       <button class="btn" onclick={truncate}>Truncate</button>
       <button class="btn" onclick={stat}>Stat</button>
     </div>