feat: upload component

demo/src/pages/upload/mod.rs

@@ -5,23 +5,65 @@ use prisms::highlight_str;
 
 #[component]
 pub fn UploadPage() -> impl IntoView {
+    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! {
         <div style="width: 896px; margin: 0 auto;">
-            <h1>"Upload(TODO)"</h1>
+            <h1>"Upload"</h1>
             <Demo>
-                <Upload>
+                <Upload custom_request>
                     <Button>
-                        "upload"
+                        "Upload"
                     </Button>
                 </Upload>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    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>
+                            <Button>
+                                "upload"
+                            </Button>
+                        </Upload>
+                    }
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+            <h3>"Drag to upload"</h3>
+            <Demo>
+                <Upload>
+                    <UploadDragger>
+                        "Click or drag a file to this area to upload"
+                    </UploadDragger>
+                </Upload>
                 <DemoCode
                     slot
                     html=highlight_str!(
                         r#"
                     <Upload>
-                        <Button>
-                            "upload"
-                        </Button>
+                        <UploadDragger>
+                            "Click or drag a file to this area to upload"
+                        </UploadDragger>
                     </Upload>
                 "#,
                         "rust"

src/upload/mod.rs

@@ -1,25 +1,23 @@
-use crate::{mount_style, utils::AsyncCallback};
+mod upload_dragger;
+
+use crate::mount_style;
 use leptos::*;
-use web_sys::FileList;
+pub use upload_dragger::UploadDragger;
+pub use web_sys::FileList;
 
 #[component]
 pub fn Upload(
     #[prop(optional, into)] accept: MaybeSignal<String>,
     #[prop(optional, into)] multiple: MaybeSignal<bool>,
-    #[prop(optional, into)] on_before_upload: Option<AsyncCallback<FileList, bool>>,
+    #[prop(optional, into)] custom_request: Option<Callback<FileList, ()>>,
     children: Children,
 ) -> impl IntoView {
     mount_style("upload", include_str!("./upload.css"));
 
     let on_file_addition = move |files: FileList| {
-        spawn_local(async move {
-            if let Some(on_before_upload) = on_before_upload {
-                let is_allow = on_before_upload.call(files).await;
-                if is_allow {
-                    //TODO submit
-                }
-            }
-        });
+        if let Some(custom_request) = custom_request {
+            custom_request.call(files);
+        }
     };
     let input_ref = create_node_ref::<html::Input>();
     let on_change = move |_| {

src/upload/upload-dragger.css

@@ -0,0 +1,14 @@
+.melt-upload-dragger {
+    padding: 20px;
+    background-color: #fafbfc;
+    color: #24292e;
+    border: 1px solid #e0e0e6;
+    border-radius: 3px;
+    text-align: center;
+    cursor: pointer;
+    transition: border 0.3s;
+}
+.melt-upload-dragger:hover,
+.melt-upload--drag-over .melt-upload-dragger {
+    border: 1px dashed var(--border-color-hover);
+}

src/upload/upload_dragger.rs

@@ -0,0 +1,21 @@
+use crate::{use_theme, utils::mount_style::mount_style, Theme};
+use leptos::*;
+
+#[component]
+pub fn UploadDragger(children: Children) -> impl IntoView {
+    mount_style("upload-dragger", include_str!("./upload-dragger.css"));
+    let theme = use_theme(Theme::light);
+    let css_vars = create_memo(move |_| {
+        let mut css_vars = String::new();
+        theme.with(|theme| {
+            let border_color_hover = theme.common.color_primary.clone();
+            css_vars.push_str(&format!("--border-color-hover: {border_color_hover};"));
+        });
+        css_vars
+    });
+    view! {
+        <div class="melt-upload-dragger" style=css_vars>
+            {children()}
+        </div>
+    }
+}