feat(dialog) - Support fileAccessMode for open dialog (#3030) (#3136)

* feat(dialog) - Support fileAccessMode for open dialog (#3030)

On iOS, when trying to access a file that exists outside of the app sandbox, one of 2 things need to happen to be able to perform any operations on said file:

* A copy of the file needs to be made to the internal app sandbox
* The method startAccessingSecurityScopedResource needs to be called.

Previously, a copy of the file was always being made when a file was selected through the picker dialog.

While this did ensure there were no file access exceptions when reading from the file, it does not scale well for large files.

To resolve this, we now support `fileAccessMode`, which allows a file handle to be returned without copying the file to the app sandbox.

This MR only supports this change for iOS; MacOS has a different set of needs for security scoped resources.

See discussion in #3716 for more discussion of the difference between iOS and MacOS.
See MR #3185 to see how these scoped files will be accessible using security scoping.

* fmt, clippy

* use enum

---------

Co-authored-by: Lucas Nogueira <lucas@tauri.app>

examples/api/src/views/Dialog.svelte

@@ -8,7 +8,8 @@
   let filter = null;
   let multiple = false;
   let directory = false;
-  let pickerMode = "";
+  let pickerMode = "document";
+  let fileAccessMode = "scoped";
 
   function arrayBufferToBase64(buffer, callback) {
     var blob = new Blob([buffer], {
@@ -52,54 +53,60 @@
       .catch(onMessage);
   }
 
-  function openDialog() {
-    open({
-      title: "My wonderful open dialog",
-      defaultPath,
-      filters: filter
-        ? [
-            {
-              name: "Tauri Example",
-              extensions: filter.split(",").map((f) => f.trim()),
-            },
-          ]
-        : [],
-      multiple,
-      directory,
-      pickerMode: pickerMode === "" ? undefined : pickerMode,
-    })
-      .then(function (res) {
-        if (Array.isArray(res)) {
-          onMessage(res);
-        } else {
-          var pathToRead = res;
-          var isFile = pathToRead.match(/\S+\.\S+$/g);
-          readFile(pathToRead)
-            .then(function (response) {
-              if (isFile) {
-                if (
-                  pathToRead.includes(".png") ||
-                  pathToRead.includes(".jpg") ||
-                  pathToRead.includes(".jpeg")
-                ) {
-                  arrayBufferToBase64(
-                    new Uint8Array(response),
-                    function (base64) {
-                      var src = "data:image/png;base64," + base64;
-                      insecureRenderHtml('<img src="' + src + '"></img>');
-                    }
-                  );
-                } else {
-                  onMessage(res);
-                }
-              } else {
-                onMessage(res);
-              }
-            })
-            .catch(onMessage);
-        }
+  async function openDialog() {
+    try {
+      var result = await open({
+        title: "My wonderful open dialog",
+        defaultPath,
+        filters: filter
+          ? [
+              {
+                name: "Tauri Example",
+                extensions: filter.split(",").map((f) => f.trim()),
+              },
+            ]
+          : [],
+        multiple,
+        directory,
+        pickerMode,
+        fileAccessMode,
       })
-      .catch(onMessage);
+
+      if (Array.isArray(result)) {
+        onMessage(result);
+      } else {
+        var pathToRead = result;
+        var isFile = pathToRead.match(/\S+\.\S+$/g);
+
+        await readFile(pathToRead)
+          .then(function (res) {
+            if (isFile) {
+              if (
+                pathToRead.includes(".png") ||
+                pathToRead.includes(".jpg") ||
+                pathToRead.includes(".jpeg")
+              ) {
+                arrayBufferToBase64(
+                  new Uint8Array(res),
+                  function (base64) {
+                    var src = "data:image/png;base64," + base64;
+                    insecureRenderHtml('<img src="' + src + '"></img>');
+                  }
+                );
+              } else {
+                // Convert byte array to UTF-8 string
+                const decoder = new TextDecoder('utf-8');
+                const text = decoder.decode(new Uint8Array(res));
+                onMessage(text);
+              }
+            } else {
+              onMessage(res);
+          }
+        })
+      }
+    } catch(exception) {
+      onMessage(exception)
+    }
   }
 
   function saveDialog() {
@@ -154,6 +161,13 @@
     <option value="document">Document</option>
   </select>
 </div>
+<div>
+  <label for="dialog-file-access-mode">File Access Mode:</label>
+  <select id="dialog-file-access-mode" bind:value={fileAccessMode}>
+    <option value="copy">Copy</option>
+    <option value="scoped">Scoped</option>
+  </select>
+</div>
 <br />
 
 <div class="flex flex-wrap flex-col md:flex-row gap-2 children:flex-shrink-0">