dioxus_web/events/
form.rs

1use super::WebEventExt;
2use crate::WebFileData;
3use dioxus_html::{FileData, FormValue, HasFileData, HasFormData};
4use js_sys::Array;
5use std::any::Any;
6use wasm_bindgen::{JsCast, prelude::wasm_bindgen};
7use web_sys::{Element, Event, FileReader};
8
9pub(crate) struct WebFormData {
10    element: Element,
11    event: Event,
12}
13
14impl WebEventExt for dioxus_html::FormData {
15    type WebEvent = Event;
16
17    #[inline(always)]
18    fn try_as_web_event(&self) -> Option<Self::WebEvent> {
19        self.downcast::<Event>().cloned()
20    }
21}
22
23impl WebFormData {
24    pub fn new(element: Element, event: Event) -> Self {
25        Self { element, event }
26    }
27}
28
29impl HasFormData for WebFormData {
30    fn value(&self) -> String {
31        let target = &self.element;
32        target
33            .dyn_ref()
34            .map(|input: &web_sys::HtmlInputElement| {
35                // todo: special case more input types
36                match input.type_().as_str() {
37                    "checkbox" => {
38                        match input.checked() {
39                            true => "true".to_string(),
40                            false => "false".to_string(),
41                        }
42                    },
43                    _ => {
44                        input.value()
45                    }
46                }
47            })
48            .or_else(|| {
49                target
50                    .dyn_ref()
51                    .map(|input: &web_sys::HtmlTextAreaElement| input.value())
52            })
53            // select elements are NOT input events - because - why woudn't they be??
54            .or_else(|| {
55                target
56                    .dyn_ref()
57                    .map(|input: &web_sys::HtmlSelectElement| input.value())
58            })
59            .or_else(|| {
60                target
61                    .dyn_ref::<web_sys::HtmlElement>()
62                    .unwrap()
63                    .text_content()
64            })
65            .expect("only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener")
66    }
67
68    fn values(&self) -> Vec<(String, FormValue)> {
69        let mut values = Vec::new();
70
71        // try to fill in form values
72        if let Some(form) = self.element.dyn_ref::<web_sys::HtmlFormElement>() {
73            let form_data = web_sys::FormData::new_with_form(form).unwrap();
74
75            for entry in form_data.entries().into_iter().flatten() {
76                if let Ok(array) = entry.dyn_into::<Array>()
77                    && let Some(name) = array.get(0).as_string()
78                {
79                    let value = array.get(1);
80                    if let Some(file) = value.dyn_ref::<web_sys::File>() {
81                        if file.name().is_empty() {
82                            values.push((name, FormValue::File(None)));
83                        } else {
84                            let data = WebFileData::new(file.clone(), FileReader::new().unwrap());
85                            let as_file = FileData::new(data);
86
87                            values.push((name, FormValue::File(Some(as_file))));
88                        }
89                    } else if let Some(s) = value.as_string() {
90                        values.push((name, FormValue::Text(s)));
91                    }
92                }
93            }
94        } else if let Some(select) = self.element.dyn_ref::<web_sys::HtmlSelectElement>() {
95            // try to fill in select element values
96            let options = get_select_data(select);
97            for option in &options {
98                values.push((select.name(), FormValue::Text(option.clone())));
99            }
100        }
101
102        values
103    }
104
105    fn as_any(&self) -> &dyn Any {
106        &self.event as &dyn Any
107    }
108
109    fn valid(&self) -> bool {
110        self.event
111            .target()
112            .and_then(|t| t.dyn_into::<web_sys::HtmlInputElement>().ok())
113            .map(|input| input.check_validity())
114            .unwrap_or(true)
115    }
116}
117
118impl HasFileData for WebFormData {
119    fn files(&self) -> Vec<FileData> {
120        use wasm_bindgen::JsCast;
121        self.event
122            .target()
123            .and_then(|t| t.dyn_into::<web_sys::HtmlInputElement>().ok())
124            .and_then(|input| input.files())
125            .map(crate::files::WebFileEngine::new)
126            .map(|engine| engine.to_files())
127            .unwrap_or_default()
128    }
129}
130
131// web-sys does not expose the keys api for select data, so we need to manually bind to it
132#[wasm_bindgen(inline_js = r#"
133export function get_select_data(select) {
134    let values = [];
135    for (let i = 0; i < select.options.length; i++) {
136      let option = select.options[i];
137      if (option.selected) {
138        values.push(option.value.toString());
139      }
140    }
141
142    return values;
143}
144"#)]
145extern "C" {
146    fn get_select_data(select: &web_sys::HtmlSelectElement) -> Vec<String>;
147}
dioxus_web/events/form.rs

dioxus_web/events/
form.rs
