How can I use Rust with wasm-bindgen to create a closure that creates another closure with state?

Question

I am trying to create a small web application that will allow the user to drag and drop files onto the window. The files will then be read and their contents printed along with their filenames to the console. In addition, the files will be added to a list.

The equivalent code in JS could look something like:

window.ondragenter = (e) => {
    e.preventDefault();
}
window.ondragover = (e) => {
    e.preventDefault();
}

const allFiles = [];

const dropCallback = (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  console.log("Got", files.length, "files");
  for (let i = 0; i < files.length; i++) {
    const file = files.item(i);
    const fileName = file.name;
    const readCallback = (text) => {
      console.log(fileName, text);
      allFiles.push({fileName, text});
    }
    file.text().then(readCallback);
  }
};

window.ondrop = dropCallback;

When trying to do this in Rust, I run in to the problem that the outer closure needs to implement FnOnce to move all_files out of its scope again, which breaks the expected signature for Closure::wrap . And Closure::once will not do the trick, since I need to be able to drop multiple files onto the window.

Here is the code that I have tried without luck:

use wasm_bindgen::prelude::*;
use wasm_bindgen::JsCast;
use wasm_bindgen::JsValue;

macro_rules! console_log {
    ($($t:tt)*) => (web_sys::console::log_1(&JsValue::from(format_args!($($t)*).to_string())))
}

struct File {
    name: String,
    contents: String,
}

#[wasm_bindgen]
pub fn main() {
    let mut all_files = Vec::new();

    let drop_callback = Closure::wrap(Box::new(move |event: &web_sys::Event| {
        event.prevent_default();
        let drag_event_ref: &web_sys::DragEvent = JsCast::unchecked_from_js_ref(event);
        let drag_event = drag_event_ref.clone();
        match drag_event.data_transfer() {
            None => {}
            Some(data_transfer) => match data_transfer.files() {
                None => {}
                Some(files) => {
                    console_log!("Got {:?} files", files.length());
                    for i in 0..files.length() {
                        if let Some(file) = files.item(i) {
                            let name = file.name();
                            let read_callback = Closure::wrap(Box::new(move |text: JsValue| {
                                let contents = text.as_string().unwrap();
                                console_log!("Contents of {:?} are {:?}", name, contents);

                                all_files.push(File {
                                    name,
                                    contents
                                });
                            }) as Box<dyn FnMut(JsValue)>);

                            file.text().then(&read_callback);

                            read_callback.forget();
                        }
                    }
                }
            },
        }
    }) as Box<dyn FnMut(&web_sys::Event)>);

    // These are just necessary to make sure the drop event is sent
    let drag_enter = Closure::wrap(Box::new(|event: &web_sys::Event| {
        event.prevent_default();
        console_log!("Drag enter!");
    }) as Box<dyn FnMut(&web_sys::Event)>);

    let drag_over = Closure::wrap(Box::new(|event: &web_sys::Event| {
        event.prevent_default();
        console_log!("Drag over!");
    }) as Box<dyn FnMut(&web_sys::Event)>);

    // Register all the events on the window
    web_sys::window()
        .and_then(|win| {
            win.set_ondragenter(Some(JsCast::unchecked_from_js_ref(drag_enter.as_ref())));
            win.set_ondragover(Some(JsCast::unchecked_from_js_ref(drag_over.as_ref())));
            win.set_ondrop(Some(JsCast::unchecked_from_js_ref(drop_callback.as_ref())));
            win.document()
        })
        .expect("Could not find window");

    // Make sure our closures outlive this function
    drag_enter.forget();
    drag_over.forget();
    drop_callback.forget();
}

The error I get is

error[E0525]: expected a closure that implements the `FnMut` trait, but this closure only implements `FnOnce`
  --> src/lib.rs:33:72
   |
33 |   ...                   let read_callback = Closure::wrap(Box::new(move |text: JsValue| {
   |                                                           -        ^^^^^^^^^^^^^^^^^^^^ this closure implements `FnOnce`, not `FnMut`
   |  _________________________________________________________|
   | |
34 | | ...                       let contents = text.as_string().unwrap();
35 | | ...                       console_log!("Contents of {:?} are {:?}", name, contents);
36 | | ...
37 | | ...                       all_files.push(File {
38 | | ...                           name,
   | |                               ---- closure is `FnOnce` because it moves the variable `name` out of its environment
39 | | ...                           contents
40 | | ...                       });
41 | | ...                   }) as Box<dyn FnMut(JsValue)>);
   | |________________________- the requirement to implement `FnMut` derives from here

error[E0525]: expected a closure that implements the `FnMut` trait, but this closure only implements `FnOnce`
  --> src/lib.rs:20:48
   |
20 |       let drop_callback = Closure::wrap(Box::new(move |event: &web_sys::Event| {
   |                                         -        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ this closure implements `FnOnce`, not `FnMut`
   |  _______________________________________|
   | |
21 | |         event.prevent_default();
22 | |         let drag_event_ref: &web_sys::DragEvent = JsCast::unchecked_from_js_ref(event);
23 | |         let drag_event = drag_event_ref.clone();
...  |
33 | |                             let read_callback = Closure::wrap(Box::new(move |text: JsValue| {
   | |                                                                        -------------------- closure is `FnOnce` because it moves the variable `all_files` out of its environment
...  |
50 | |         }
51 | |     }) as Box<dyn FnMut(&web_sys::Event)>);
   | |______- the requirement to implement `FnMut` derives from here

error: aborting due to 2 previous errors; 1 warning emitted

For more information about this error, try `rustc --explain E0525`.
error: could not compile `hello_world`.

To learn more, run the command again with --verbose.

In a more complex example that I have not been able to reproduce in a simpler form, I get a more cryptic error, but I expect it to be related to the above:

error[E0277]: expected a `std::ops::FnMut<(&web_sys::Event,)>` closure, found `[closure@src/main.rs:621:52: 649:10 contents:std::option::Option<std::string::String>, drop_proxy:winit::event_loop::EventLoopProxy<CustomEvent>]`
   --> src/main.rs:621:43
    |
621 |           let drop_callback = Closure::wrap(Box::new(move |event: &web_sys::Event| {
    |  ___________________________________________^
622 | |             event.prevent_default();
623 | |             let drag_event_ref: &web_sys::DragEvent = JsCast::unchecked_from_js_ref(event);
624 | |             let drag_event = drag_event_ref.clone();
...   |
648 | |             }
649 | |         }) as Box<dyn FnMut(&web_sys::Event)>);
    | |__________^ expected an `FnMut<(&web_sys::Event,)>` closure, found `[closure@src/main.rs:621:52: 649:10 contents:std::option::Option<std::string::String>, drop_proxy:winit::event_loop::EventLoopProxy<CustomEvent>]`

I tried putting the all_files variable into a RefCell , but I still got a similar error. Are there any tricks or types that I can use to work around this in Rust and achieve what I want?

Answer 1

First, you are trying to copy name into a number of instances of File , but it must be cloned. Second, you need to properly ensure that all_files will be available whenever a closure wants to call it. One way to do so is by using a RefCell to enable multiple closures to write to it, and wrapping that in a Rc to ensure that it stays alive as long as any of the closures are alive.

Try this:

use std::{cell::RefCell, rc::Rc};
use wasm_bindgen::{prelude::*, JsCast, JsValue};

macro_rules! console_log {
    ($($t:tt)*) => (web_sys::console::log_1(&JsValue::from(format_args!($($t)*).to_string())))
}

struct File {
    name: String,
    contents: String,
}

#[wasm_bindgen]
pub fn main() {
    let all_files = Rc::new(RefCell::new(Vec::new()));

    let drop_callback = Closure::wrap(Box::new(move |event: &web_sys::Event| {
        event.prevent_default();
        let drag_event_ref: &web_sys::DragEvent = event.unchecked_ref();
        let drag_event = drag_event_ref.clone();
        match drag_event.data_transfer() {
            None => {}
            Some(data_transfer) => match data_transfer.files() {
                None => {}
                Some(files) => {
                    console_log!("Got {:?} files", files.length());
                    for i in 0..files.length() {
                        if let Some(file) = files.item(i) {
                            let name = file.name();
                            let all_files_ref = Rc::clone(&all_files);
                            let read_callback = Closure::wrap(Box::new(move |text: JsValue| {
                                let contents = text.as_string().unwrap();
                                console_log!("Contents of {:?} are {:?}", &name, contents);

                                (*all_files_ref).borrow_mut().push(File {
                                    name: name.clone(),
                                    contents,
                                });
                            })
                                as Box<dyn FnMut(JsValue)>);

                            file.text().then(&read_callback);

                            read_callback.forget();
                        }
                    }
                }
            },
        }
    }) as Box<dyn FnMut(&web_sys::Event)>);

    // These are just necessary to make sure the drop event is sent
    let drag_enter = Closure::wrap(Box::new(|event: &web_sys::Event| {
        event.prevent_default();
        console_log!("Drag enter!");
    }) as Box<dyn FnMut(&web_sys::Event)>);

    let drag_over = Closure::wrap(Box::new(|event: &web_sys::Event| {
        event.prevent_default();
        console_log!("Drag over!");
    }) as Box<dyn FnMut(&web_sys::Event)>);

    // Register all the events on the window
    web_sys::window()
        .and_then(|win| {
            win.set_ondragenter(Some(drag_enter.as_ref().unchecked_ref()));
            win.set_ondragover(Some(drag_over.as_ref().unchecked_ref()));
            win.set_ondrop(Some(drop_callback.as_ref().unchecked_ref()));
            win.document()
        })
        .expect("Could not find window");

    // Make sure our closures outlive this function
    drag_enter.forget();
    drag_over.forget();
    drop_callback.forget();
}

Note that if you are using multiple threads, you may want something other than RefCell (maybe Mutex instead). Also, I also changed uses of JsCast::unchecked_from_js_ref(x) to the more canonical x.as_ref().unchecked_ref() .