feat: upload add drag and drop

Cargo.toml

@@ -14,7 +14,12 @@ license = "MIT"
 
 [dependencies]
 leptos = { version = "0.5.1", features = ["csr"] }
-web-sys = { version = "0.3.62", features = ["DomRect", "File", "FileList"] }
+web-sys = { version = "0.3.62", features = [
+    "DomRect",
+    "File",
+    "FileList",
+    "DataTransfer",
+] }
 icondata = { version = "0.1.0", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",

demo/src/pages/components.rs

@@ -11,7 +11,7 @@ pub fn ComponentsPage() -> impl IntoView {
         let mut pathname = loaction.pathname.get_untracked();
 
         if pathname.starts_with("/thaw/components/") {
-            pathname.drain(20..).collect()
+            pathname.drain(17..).collect()
         } else {
             String::new()
         }

demo/src/pages/upload/mod.rs

@@ -51,7 +51,7 @@ pub fn UploadPage() -> impl IntoView {
             </Demo>
             <h3>"Drag to upload"</h3>
             <Demo>
-                <Upload>
+                <Upload custom_request>
                     <UploadDragger>
                         "Click or drag a file to this area to upload"
                     </UploadDragger>
@@ -60,11 +60,21 @@ pub fn UploadPage() -> impl IntoView {
                     slot
                     html=highlight_str!(
                         r#"
-                    <Upload>
+                    let message = use_message();
+                    let custom_request = move |file_list: FileList| {
+                        message.create(
+                            format!("Number of uploaded files: {}", file_list.length()),
+                            MessageVariant::Success,
+                            Default::default(),
+                        );
+                    };
+                    view! {
+                        <Upload custom_request>
                             <UploadDragger>
                                 "Click or drag a file to this area to upload"
                             </UploadDragger>
                         </Upload>
+                    }
                 "#,
                         "rust"
                     )

src/upload/mod.rs

@@ -34,17 +34,48 @@ pub fn Upload(
             input_ref.click();
         }
     };
+
+    let is_trigger_dargover = create_rw_signal(false);
+    let on_trigger_drop = move |event: ev::DragEvent| {
+        event.prevent_default();
+        if let Some(data) = event.data_transfer() {
+            if let Some(files) = data.files() {
+                on_file_addition(files);
+            }
+        }
+        is_trigger_dargover.set(false);
+    };
+    let on_trigger_dragover = move |event: ev::DragEvent| {
+        event.prevent_default();
+        is_trigger_dargover.set(true);
+    };
+    let on_trigger_dragenter = move |event: ev::DragEvent| {
+        event.prevent_default();
+    };
+    let on_trigger_dragleave = move |event: ev::DragEvent| {
+        event.prevent_default();
+        is_trigger_dargover.set(false);
+    };
+
     view! {
         <div class="thaw-upload">
             <input
                 class="thaw-upload__input"
+                class=("thaw-upload--drag-over", move || is_trigger_dargover.get())
                 ref=input_ref
                 type="file"
                 accept=move || accept.get()
                 multiple=move || multiple.get()
                 on:change=on_change
             />
-            <div class="thaw-upload__trigger" on:click=on_click>
+            <div
+                class="thaw-upload__trigger"
+                on:click=on_click
+                on:drop=on_trigger_drop
+                on:dragover=on_trigger_dragover
+                on:dragenter=on_trigger_dragenter
+                on:dragleave=on_trigger_dragleave
+            >
                 {children()}
             </div>
         </div>