wasm save_file (#134)

Wasm32 AsyncFileSaveDialogImpl

Use as
```
rfd::AsyncFileDialog::new()
.set_title("title")
.set_file_name("demofile.txt")
.save_file()
.await
.unwrap()
.write(Box::new(*b"file content"))
.await;
```
---------

Co-authored-by: PolyMeilex <[email protected]>

Author: Easyoakland

Cargo.toml

@@ -62,10 +62,14 @@ web-sys = { version = "0.3.46", features = [
   'Element',
   'HtmlInputElement',
   'HtmlButtonElement',
+  'HtmlAnchorElement',
   'Window',
   'File',
   'FileList',
   'FileReader',
+  'Blob',
+  'BlobPropertyBag',
+  'Url',
 ] }
 wasm-bindgen-futures = "0.4.19"
 

examples/winit-example/src/main.rs

@@ -41,7 +41,6 @@ fn main() {
         }
         event::Event::WindowEvent { event, .. } => match event {
             WindowEvent::CloseRequested { .. } => *control_flow = ControlFlow::Exit,
-            #[cfg(not(target_arch = "wasm32"))]
             WindowEvent::KeyboardInput {
                 input:
                     event::KeyboardInput {
@@ -60,6 +59,14 @@ fn main() {
                 let event_loop_proxy = event_loop_proxy.clone();
                 executor.execut(async move {
                     let file = dialog.await;
+
+                    let file = if let Some(file) = file {
+                        file.write(b"Hi! This is a test file").await.unwrap();
+                        Some(file)
+                    } else {
+                        None
+                    };
+
                     event_loop_proxy
                         .send_event(format!("saved file name: {:#?}", file))
                         .ok();

src/backend/wasm.rs

@@ -1,24 +1,40 @@
+mod file_dialog;
+
+use crate::{
+    file_dialog::FileDialog, file_handle::WasmFileHandleKind, FileHandle, MessageDialogResult,
+};
 use wasm_bindgen::prelude::*;
 use wasm_bindgen::JsCast;
-use web_sys::Element;
+use web_sys::{Element, HtmlAnchorElement, HtmlButtonElement, HtmlElement, HtmlInputElement};
 
-use web_sys::{HtmlButtonElement, HtmlElement, HtmlInputElement};
+#[derive(Clone, Debug)]
+pub enum FileKind<'a> {
+    In(FileDialog),
+    Out(FileDialog, &'a [u8]),
+}
 
-use crate::file_dialog::FileDialog;
-use crate::{FileHandle, MessageDialogResult};
+#[derive(Clone, Debug)]
+enum HtmlIoElement<'a> {
+    Input(HtmlInputElement),
+    Output {
+        element: HtmlAnchorElement,
+        name: String,
+        data: &'a [u8],
+    },
+}
 
-pub struct WasmDialog {
+pub struct WasmDialog<'a> {
     overlay: Element,
     card: Element,
     title: Option<HtmlElement>,
-    input: HtmlInputElement,
+    io: HtmlIoElement<'a>,
     button: HtmlButtonElement,
 
     style: Element,
 }
 
-impl WasmDialog {
-    pub fn new(opt: &FileDialog) -> Self {
+impl<'a> WasmDialog<'a> {
+    pub fn new(opt: &FileKind<'a>) -> Self {
         let window = web_sys::window().expect("Window not found");
         let document = window.document().expect("Document not found");
 
@@ -33,9 +49,13 @@ impl WasmDialog {
             card
         };
 
-        let title = opt.title.as_ref().map(|title| {
-            let title_el: web_sys::HtmlElement =
-                document.create_element("div").unwrap().dyn_into().unwrap();
+        let title = match opt {
+            FileKind::In(dialog) => &dialog.title,
+            FileKind::Out(dialog, _) => &dialog.title,
+        }
+        .as_ref()
+        .map(|title| {
+            let title_el: HtmlElement = document.create_element("div").unwrap().dyn_into().unwrap();
 
             title_el.set_id("rfd-title");
             title_el.set_inner_html(title);
@@ -44,25 +64,41 @@ impl WasmDialog {
             title_el
         });
 
-        let input = {
-            let input_el = document.create_element("input").unwrap();
-            let input: HtmlInputElement = wasm_bindgen::JsCast::dyn_into(input_el).unwrap();
+        let io = match opt {
+            FileKind::In(dialog) => {
+                let input_el = document.create_element("input").unwrap();
+                let input: HtmlInputElement = wasm_bindgen::JsCast::dyn_into(input_el).unwrap();
 
-            input.set_id("rfd-input");
-            input.set_type("file");
+                input.set_id("rfd-input");
+                input.set_type("file");
 
-            let mut accept: Vec<String> = Vec::new();
+                let mut accept: Vec<String> = Vec::new();
 
-            for filter in opt.filters.iter() {
-                accept.append(&mut filter.extensions.to_vec());
-            }
+                for filter in dialog.filters.iter() {
+                    accept.append(&mut filter.extensions.to_vec());
+                }
 
-            accept.iter_mut().for_each(|ext| ext.insert_str(0, "."));
+                accept.iter_mut().for_each(|ext| ext.insert_str(0, "."));
 
-            input.set_accept(&accept.join(","));
+                input.set_accept(&accept.join(","));
 
-            card.append_child(&input).unwrap();
-            input
+                card.append_child(&input).unwrap();
+                HtmlIoElement::Input(input)
+            }
+            FileKind::Out(dialog, data) => {
+                let output_el = document.create_element("a").unwrap();
+                let output: HtmlAnchorElement = wasm_bindgen::JsCast::dyn_into(output_el).unwrap();
+
+                output.set_id("rfd-output");
+                output.set_inner_text("click here to download your file");
+
+                card.append_child(&output).unwrap();
+                HtmlIoElement::Output {
+                    element: output,
+                    name: dialog.file_name.clone().unwrap_or_default(),
+                    data,
+                }
+            }
         };
 
         let button = {
@@ -85,7 +121,7 @@ impl WasmDialog {
             card,
             title,
             button,
-            input,
+            io,
 
             style,
         }
@@ -94,26 +130,78 @@ impl WasmDialog {
     async fn show(&self) {
         let window = web_sys::window().expect("Window not found");
         let document = window.document().expect("Document not found");
-        let body = document.body().expect("document should have a body");
+        let body = document.body().expect("Document should have a body");
 
         let overlay = self.overlay.clone();
         let button = self.button.clone();
 
-        let promise = js_sys::Promise::new(&mut move |res, _rej| {
-            let closure = Closure::wrap(Box::new(move || {
-                res.call0(&JsValue::undefined()).unwrap();
-            }) as Box<dyn FnMut()>);
+        let promise = match &self.io {
+            HtmlIoElement::Input(_) => js_sys::Promise::new(&mut move |res, _rej| {
+                let resolve_promise = Closure::wrap(Box::new(move || {
+                    res.call0(&JsValue::undefined()).unwrap();
+                }) as Box<dyn FnMut()>);
+
+                button.set_onclick(Some(resolve_promise.as_ref().unchecked_ref()));
+                resolve_promise.forget();
+                body.append_child(&overlay).ok();
+            }),
+            HtmlIoElement::Output {
+                element,
+                name,
+                data,
+            } => {
+                js_sys::Promise::new(&mut |res, _rej| {
+                    // Moved to keep closure as FnMut
+                    let output = element.clone();
+                    let file_name = name.clone();
+
+                    let resolve_promise = Closure::wrap(Box::new(move || {
+                        res.call1(&JsValue::undefined(), &JsValue::from(true))
+                            .unwrap();
+                    }) as Box<dyn FnMut()>);
+
+                    // Resolve the promise once the user clicks the download link or the button.
+                    output.set_onclick(Some(resolve_promise.as_ref().unchecked_ref()));
+                    button.set_onclick(Some(resolve_promise.as_ref().unchecked_ref()));
+                    resolve_promise.forget();
+
+                    let set_download_link = move |in_array: &[u8], name: &str| {
+                        // See <https://stackoverflow.com/questions/69556755/web-sysurlcreate-object-url-with-blobblob-not-formatting-binary-data-co>
+                        let array = js_sys::Array::new();
+                        let uint8arr = js_sys::Uint8Array::new(
+                            // Safety: No wasm allocations happen between creating the view and consuming it in the array.push
+                            &unsafe { js_sys::Uint8Array::view(&in_array) }.into(),
+                        );
+                        array.push(&uint8arr.buffer());
+                        let blob = web_sys::Blob::new_with_u8_array_sequence_and_options(
+                            &array,
+                            web_sys::BlobPropertyBag::new().type_("application/octet-stream"),
+                        )
+                        .unwrap();
+                        let download_url =
+                            web_sys::Url::create_object_url_with_blob(&blob).unwrap();
+
+                        output.set_href(&download_url);
+                        output.set_download(&name);
+                    };
+
+                    set_download_link(&*data, &file_name);
+
+                    body.append_child(&overlay).ok();
+                })
+            }
+        };
 
-            button.set_onclick(Some(closure.as_ref().unchecked_ref()));
-            closure.forget();
-            body.append_child(&overlay).ok();
-        });
         let future = wasm_bindgen_futures::JsFuture::from(promise);
         future.await.unwrap();
     }
 
     fn get_results(&self) -> Option<Vec<FileHandle>> {
-        if let Some(files) = self.input.files() {
+        let input = match &self.io {
+            HtmlIoElement::Input(input) => input,
+            _ => panic!("Internal Error: Results only exist for input dialog"),
+        };
+        if let Some(files) = input.files() {
             let len = files.length();
             if len > 0 {
                 let mut file_handles = Vec::new();
@@ -136,26 +224,41 @@ impl WasmDialog {
     }
 
     async fn pick_files(self) -> Option<Vec<FileHandle>> {
-        self.input.set_multiple(true);
+        if let HtmlIoElement::Input(input) = &self.io {
+            input.set_multiple(true);
+        } else {
+            panic!("Internal error: Pick files only on input wasm dialog")
+        }
 
         self.show().await;
 
         self.get_results()
     }
 
     async fn pick_file(self) -> Option<FileHandle> {
-        self.input.set_multiple(false);
+        if let HtmlIoElement::Input(input) = &self.io {
+            input.set_multiple(false);
+        } else {
+            panic!("Internal error: Pick file only on input wasm dialog")
+        }
 
         self.show().await;
 
         self.get_result()
     }
+
+    fn io_element(&self) -> Element {
+        match self.io.clone() {
+            HtmlIoElement::Input(element) => element.unchecked_into(),
+            HtmlIoElement::Output { element, .. } => element.unchecked_into(),
+        }
+    }
 }
 
-impl Drop for WasmDialog {
+impl<'a> Drop for WasmDialog<'a> {
     fn drop(&mut self) {
         self.button.remove();
-        self.input.remove();
+        self.io_element().remove();
         self.title.as_ref().map(|elem| elem.remove());
         self.card.remove();
 
@@ -168,11 +271,11 @@ use super::{AsyncFilePickerDialogImpl, DialogFutureType};
 
 impl AsyncFilePickerDialogImpl for FileDialog {
     fn pick_file_async(self) -> DialogFutureType<Option<FileHandle>> {
-        let dialog = WasmDialog::new(&self);
+        let dialog = WasmDialog::new(&FileKind::In(self));
         Box::pin(dialog.pick_file())
     }
     fn pick_files_async(self) -> DialogFutureType<Option<Vec<FileHandle>>> {
-        let dialog = WasmDialog::new(&self);
+        let dialog = WasmDialog::new(&FileKind::In(self));
         Box::pin(dialog.pick_files())
     }
 }
@@ -209,11 +312,21 @@ impl MessageDialogImpl for MessageDialog {
     }
 }
 
-use crate::backend::AsyncMessageDialogImpl;
-
-impl AsyncMessageDialogImpl for MessageDialog {
+impl crate::backend::AsyncMessageDialogImpl for MessageDialog {
     fn show_async(self) -> DialogFutureType<MessageDialogResult> {
         let val = MessageDialogImpl::show(self);
         Box::pin(std::future::ready(val))
     }
 }
+
+impl FileHandle {
+    pub async fn write(&self, data: &[u8]) -> std::io::Result<()> {
+        let dialog = match &self.0 {
+            WasmFileHandleKind::Writable(dialog) => dialog,
+            _ => panic!("This File Handle doesn't support writing. Use `save_file` to get a writeable FileHandle in Wasm"),
+        };
+        let dialog = WasmDialog::new(&FileKind::Out(dialog.clone(), data));
+        dialog.show().await;
+        Ok(())
+    }
+}

src/backend/wasm/file_dialog.rs

@@ -0,0 +1,16 @@
+//
+// File Save
+//
+
+use crate::{
+    backend::{AsyncFileSaveDialogImpl, DialogFutureType},
+    file_dialog::FileDialog,
+    FileHandle,
+};
+use std::future::ready;
+impl AsyncFileSaveDialogImpl for FileDialog {
+    fn save_file_async(self) -> DialogFutureType<Option<FileHandle>> {
+        let file = FileHandle::writable(self);
+        Box::pin(ready(Some(file)))
+    }
+}

src/backend/wasm/style.css

@@ -24,7 +24,7 @@
 #rfd-title {
   line-height: 1.6;
 }
-#rfd-input {
+#rfd-input,#rfd-output {
   text-align: center;
 }
 #rfd-button {