feat: begin implementation of file drop component

Cargo.toml

@@ -14,16 +14,16 @@ console_error_panic_hook = { version = "0.1", optional = true}
 leptos_axum = { version = "0.8", optional = true }
 leptos_meta = { version = "0.8" }
 tokio = { version = "1", features = ["rt-multi-thread"], optional = true }
-wasm-bindgen = { version = "=0.2.106", optional = true }
+wasm-bindgen = { version = "0.2", optional = true }
-aws-sdk-dynamodb = { version = "1", optional = true }
+aws-sdk-dynamodb = { version = "^1", optional = true }
-aws-config = { version = "1.6.2", optional = true }
+aws-config = { version = "^1.8", optional = true }
-serde = "1.0.219"
+serde = "^1.0"
-serde_dynamo = { version = "4.2.14", features = ["aws-sdk-dynamodb+1"], optional = true }
+serde_dynamo = { version = "^4", features = ["aws-sdk-dynamodb+1"], optional = true }
-uuid = { version = "1.17.0", features = ["serde", "v4", "js"] }
+uuid = { version = "^1", features = ["serde", "v4", "js"] }
 leptos_oidc = "0.9.0"
-base64 = "0.22.1"
+base64 = "0.22"
-chrono = "0.4.42"
+chrono = "0.4"
-leptos_animate = "0.1.9"
+leptos_animate = "0.1"
 
 macros = { path = "./macros" }
 traits = { path = "./traits" }
@@ -31,6 +31,7 @@ icondata = { version = "0.7.0", features = ["font-awesome"] }
 leptos_icons = "0.7.1"
 indexmap = { version = "2.13.0", features = ["serde"] }
 csv = "1.4.0"
+leptos-use = { version = "0.18.3", features = ["use_drop_zone"] }
 
 [features]
 default = ["ssr"]
@@ -49,6 +50,7 @@ ssr = [
     "leptos/ssr",
     "leptos_meta/ssr",
     "leptos_router/ssr",
+    "leptos-use/ssr"
 ]
 
 # Defines a size-optimized profile for the WASM bundle in release mode

src/components/file_drop.rs

@@ -0,0 +1,53 @@
+use leptos::html::Div;
+use leptos::logging::debug_log;
+use leptos::prelude::*;
+use leptos_use::{UseDropZoneOptions, UseDropZoneReturn, use_drop_zone_with_options};
+
+#[component]
+pub fn FileDrop() -> impl IntoView {
+    // I'm really not sure how to hydrate this, but we'll try our best to do it somehow.
+    // We just need to know the file names and the size, not actually have the file itself.
+
+    let zone_ref = NodeRef::<Div>::new();
+
+    let file_list = RwSignal::new(Vec::new());
+
+    // Files are just the current files that are being processed, not the full list of files that
+    // have been dropped. So, if the user drops multiple files, it will be the list of those files,
+    // but it will wipe the previous set of dropped files.
+    let UseDropZoneReturn {
+        is_over_drop_zone,
+        files,
+    } = use_drop_zone_with_options(
+        zone_ref,
+        UseDropZoneOptions::default()
+            .on_over(|_| debug_log!("File is over the drop zone!"))
+            .on_drop(move |mut ev| {
+                file_list.update(|list| {
+                    list.extend(ev.files);
+                });
+            }),
+    );
+
+    Effect::new(move || {
+        let file_names = file_list
+            .get()
+            .iter()
+            .map(|file| file.name())
+            .collect::<Vec<String>>()
+            .join(", ");
+
+        debug_log!("Updated file list. Current file names: {}", file_names);
+    });
+
+    view! {
+        <div
+            node_ref=zone_ref
+            class="size-64"
+            class=(["bg-blue-500"], move || is_over_drop_zone.get())
+        />
+        <For each=move || file_list.get() key=|file| file.name() let:file>
+            <div>"File name: "{file.name()}</div>
+        </For>
+    }
+}

src/components/mod.rs

@@ -3,6 +3,7 @@ mod banner;
 mod dashboard_button;
 mod data_display;
 mod date;
+mod file_drop;
 mod header;
 mod lists;
 mod loading;
@@ -17,7 +18,7 @@ mod utils;
 mod validated_form;
 
 pub use self::{
-    action_button::*, banner::*, dashboard_button::*, data_display::*, date::*, header::*,
+    action_button::*, banner::*, dashboard_button::*, data_display::*, date::*, file_drop::*,
-    lists::*, loading::*, multi_entry::*, panel::*, row::*, tabs::*, text_field::*, toasts::*,
+    header::*, lists::*, loading::*, multi_entry::*, panel::*, row::*, tabs::*, text_field::*,
-    validated_form::*,
+    toasts::*, validated_form::*,
 };

src/pages/admin/utils_page.rs

@@ -1,5 +1,5 @@
 use crate::common::{DateInfo, DateRange};
-use crate::components::ActionButton;
+use crate::components::{ActionButton, FileDrop};
 use crate::pages::api::exports::get_scholarship_csv;
 use crate::pages::api::{CreateDates, CreateTestComparisons, exports::GetScholarshipCsv};
 use chrono::DateTime;
@@ -109,6 +109,7 @@ pub fn AdminUtilsPage() -> impl IntoView {
                 <ActionButton on:click=on_click_comparisons>"Create Comparisons"</ActionButton>
                 <ActionButton on:click=on_click_dates>"Create Dates"</ActionButton>
                 <ActionButton on:click=on_click_export>"Scholarship Export"</ActionButton>
+                <FileDrop />
             </div>
         </div>
     }.into_any()