Add Cross Platform File Selection API

Cargo.toml

@@ -38,6 +38,7 @@ futures = "0.3.31"
 futures-util = "0.3.31"
 
 serde = "1.0.163"
+serde_json = "1.0.141"
 wasm-bindgen = "0.2.100"
 web-sys = "0.3.77"
 js-sys = "0.3.77"

README.md

@@ -44,6 +44,7 @@
   - [x] Channels
 - `dioxus-util`
   - [x] `use_root_scroll`
+  - [x] `select_file*`
 - [ ] Camera
 - [ ] WiFi
 - [ ] Bluetooth

examples/select_file/Cargo.toml

@@ -0,0 +1,13 @@
+[package]
+name = "select-file-example"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus-util.workspace = true
+dioxus.workspace = true
+
+[features]
+default = ["desktop"]
+web = ["dioxus/web"]
+desktop = ["dioxus/desktop"]

examples/select_file/README.md

@@ -0,0 +1,12 @@
+# select_file apis
+
+
+### Run
+
+**Web**
+
+```dx serve --platform web```
+
+**Desktop**
+
+```dx serve --platform desktop```

examples/select_file/src/main.rs

@@ -0,0 +1,106 @@
+use dioxus::logger::tracing::{info, Level};
+use dioxus::prelude::*;
+use dioxus_util::select_file::{
+    select_file, select_file_base64, select_file_text, select_files, select_files_base64,
+    select_files_text, FilePickerOptions,
+};
+
+fn main() {
+    dioxus::logger::init(Level::TRACE).unwrap();
+    launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    rsx! {
+        div { style: "display: flex; flex-direction: column; gap: 0.5rem;",
+            h1 { "File Picker Examples" }
+
+            button {
+                onclick: move |_| async move {
+                    let file = select_file_base64(&FilePickerOptions::default())
+                        .await
+                        .unwrap();
+                    if let Some(file) = file {
+                        info!("Selected a file with base64 data: {:?}", file);
+                    } else {
+                        info!("No file selected");
+                    }
+                },
+                "Select one file with base64 data"
+            }
+
+            button {
+                onclick: move |_| async move {
+                    let files = select_files_base64(&FilePickerOptions::default())
+                        .await
+                        .unwrap();
+                    if files.is_empty() {
+                        info!("No files selected");
+                    } else {
+                        for file in files {
+                            info!("Selected file with base64 data: {:?}", file);
+                        }
+                    }
+                },
+                "Select multiple files with base64 data"
+            }
+
+            button {
+                onclick: move |_| async move {
+                    let file = select_file_text(&FilePickerOptions::default())
+                        .await
+                        .unwrap();
+                    if let Some(file) = file {
+                        info!("Selected a file with text data: {:?}", file);
+                    } else {
+                        info!("No file selected");
+                    }
+                },
+                "Select one file with text data"
+            }
+
+            button {
+                onclick: move |_| async move {
+                    let files = select_files_text(&FilePickerOptions::default())
+                        .await
+                        .unwrap();
+                    if files.is_empty() {
+                        info!("No files selected");
+                    } else {
+                        for file in files {
+                            info!("Selected file with text data: {:?}", file);
+                        }
+                    }
+                },
+                "Select multiple files with text data"
+            }
+
+            button {
+                onclick: move |_| async move {
+                    let file = select_file(&FilePickerOptions::default()).await.unwrap();
+                    if let Some(file) = file {
+                        info!("Selected a file with metadata only: {:?}", file);
+                    } else {
+                        info!("No file selected");
+                    }
+                },
+                "Select one file (metadata only)"
+            }
+
+            button {
+                onclick: move |_| async move {
+                    let files = select_files(&FilePickerOptions::default()).await.unwrap();
+                    if files.is_empty() {
+                        info!("No files selected");
+                    } else {
+                        for file in files {
+                            info!("Selected file with metadata only: {:?}", file);
+                        }
+                    }
+                },
+                "Select multiple files (metadata only)"
+            }
+        }
+    }
+}

packages/util/Cargo.toml

@@ -15,4 +15,6 @@ repository.workspace = true
 
 [dependencies]
 dioxus = { workspace = true }
+serde_json = { workspace = true }
+
 serde.workspace = true

packages/util/src/lib.rs

@@ -1,3 +1,4 @@
 //! Common utilities for Dioxus.
 
 pub mod scroll;
+pub mod select_file;

packages/util/src/scroll.rs

@@ -49,7 +49,7 @@ static SCROLL_TRACKER_COUNTER: AtomicUsize = AtomicUsize::new(0);
 pub fn use_root_scroll() -> Signal<ScrollMetrics> {
     let callback_name = use_hook(|| {
         let instance_id = SCROLL_TRACKER_COUNTER.fetch_add(1, Ordering::SeqCst);
-        format!("scrollCallback_{}", instance_id)
+        format!("scrollCallback_{instance_id}")
     });
 
     let mut scroll_metrics = use_signal(|| ScrollMetrics {