diff --git a/examples/file_upload.rs b/examples/file_upload.rs
index 502d32bd8..888459574 100644
--- a/examples/file_upload.rs
+++ b/examples/file_upload.rs
@@ -7,14 +7,26 @@ fn main() {
 }
 
 fn App(cx: Scope) -> Element {
+    let enable_directory_upload = use_state(cx, || false);
     let files_uploaded: &UseRef<Vec<String>> = use_ref(cx, Vec::new);
 
     cx.render(rsx! {
+        label {
+            input {
+                r#type: "checkbox",
+                checked: "{enable_directory_upload}",
+                oninput: move |evt| {
+                    enable_directory_upload.set(evt.value.parse().unwrap());
+                },
+            },
+            "Enable directory upload"
+        }
+
         input {
             r#type: "file",
             accept: ".txt, .rs",
             multiple: true,
-            directory: true,
+            directory: **enable_directory_upload,
             onchange: |evt| {
                 to_owned![files_uploaded];
                 async move {
diff --git a/packages/desktop/src/file_upload.rs b/packages/desktop/src/file_upload.rs
index b815064ec..307577168 100644
--- a/packages/desktop/src/file_upload.rs
+++ b/packages/desktop/src/file_upload.rs
@@ -21,7 +21,10 @@ fn get_file_event_for_folder(request: &FileDiologRequest, dialog: rfd::FileDialo
     }
 }
 
-fn get_file_event_for_file(request: &FileDiologRequest, mut dialog: rfd::FileDialog) -> Vec<PathBuf> {
+fn get_file_event_for_file(
+    request: &FileDiologRequest,
+    mut dialog: rfd::FileDialog,
+) -> Vec<PathBuf> {
     let filters: Vec<_> = request
         .accept
         .as_deref()
diff --git a/packages/desktop/src/protocol.rs b/packages/desktop/src/protocol.rs
index 25e276003..89ce50a48 100644
--- a/packages/desktop/src/protocol.rs
+++ b/packages/desktop/src/protocol.rs
@@ -24,7 +24,7 @@ fn module_loader(root_name: &str) -> String {
             let target_id = find_real_id(target);
             if (target_id !== null) {
               const send = (event_name) => {
-                const message = serializeIpcMessage("file_diolog", { accept: target.getAttribute("accept"), directory: target.hasAttribute("directory"), multiple: target.hasAttribute("multiple"), target: parseInt(target_id), bubbles: event_bubbles(event_name), event: event_name });
+                const message = serializeIpcMessage("file_diolog", { accept: target.getAttribute("accept"), directory: target.getAttribute("webkitdirectory") === "true", multiple: target.hasAttribute("multiple"), target: parseInt(target_id), bubbles: event_bubbles(event_name), event: event_name });
                 window.ipc.postMessage(message);
               };
               send("change&input");
diff --git a/packages/html/src/elements.rs b/packages/html/src/elements.rs
index ed001a843..514aea2d1 100644
--- a/packages/html/src/elements.rs
+++ b/packages/html/src/elements.rs
@@ -1098,7 +1098,7 @@ builder_constructors! {
         autofocus: Bool DEFAULT,
         capture: String DEFAULT,
         checked: Bool DEFAULT,
-        directory: Bool DEFAULT,
+        directory: Bool "webkitdirectory",
         disabled: Bool DEFAULT,
         form: Id DEFAULT,
         formaction: Uri DEFAULT,
diff --git a/packages/interpreter/src/sledgehammer_bindings.rs b/packages/interpreter/src/sledgehammer_bindings.rs
index 02c2cc8dd..508c78a7a 100644
--- a/packages/interpreter/src/sledgehammer_bindings.rs
+++ b/packages/interpreter/src/sledgehammer_bindings.rs
@@ -143,10 +143,10 @@ mod js {
         autofocus: true,
         autoplay: true,
         checked: true,
-        directory: true,
         controls: true,
         default: true,
         defer: true,
+        directory: true,
         disabled: true,
         formnovalidate: true,
         hidden: true,