feat: begin implementation of file drop component

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::*,
-    lists::*, loading::*, multi_entry::*, panel::*, row::*, tabs::*, text_field::*, toasts::*,
-    validated_form::*,
+    action_button::*, banner::*, dashboard_button::*, data_display::*, date::*, file_drop::*,
+    header::*, lists::*, loading::*, multi_entry::*, panel::*, row::*, tabs::*, text_field::*,
+    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()