feat: implement dynamo insert with file upload

src/components/file_drop.rs

@@ -1,3 +1,4 @@
+use crate::pages::api::files::upload_file;
 use leptos::html::{Input, Label};
 use leptos::logging::debug_log;
 use leptos::prelude::*;
@@ -5,13 +6,9 @@ use leptos::web_sys::{File, FormData};
 use leptos_icons::Icon;
 use leptos_oidc::AuthSignal;
 use leptos_use::{UseDropZoneOptions, UseDropZoneReturn, use_drop_zone_with_options};
-use crate::pages::api::files::upload_file;
 
 #[component]
-pub fn FileDrop(
-    #[prop(into)] name: String,
-    #[prop(into)] form_id: String,
-) -> impl IntoView {
+pub fn FileDrop(#[prop(into)] name: String, #[prop(into)] form_id: String) -> impl IntoView {
     let zone_ref = NodeRef::<Label>::new();
     let input_ref = NodeRef::<Input>::new();
 
@@ -23,9 +20,7 @@ pub fn FileDrop(
 
     let upload_action = StoredValue::new(Action::new(|form_data: &FormData| {
         let form_data = form_data.clone();
-        async move {
-            upload_file(form_data.into()).await
-        }
+        async move { upload_file(form_data.into()).await }
     }));
 
     let uploading = upload_action.get_value().pending();
@@ -34,20 +29,26 @@ pub fn FileDrop(
         let form_data = FormData::new().unwrap();
 
         files.iter().for_each(|file| {
-            let file_name = format!("{}_{}", name.get_value(), file.name());
-
-            form_data.append_with_blob_and_filename(&name.get_value(), file, &file_name)
+            form_data
+                .append_with_blob_and_filename(&name.get_value(), file, &file.name())
                 .unwrap();
         });
 
-        form_data.append_with_str("form_id", form_id.get_value().as_str()).unwrap();
+        form_data
+            .append_with_str("form_id", form_id.get_value().as_str())
+            .unwrap();
 
-        let token = auth.try_with(|a|
-            a.authenticated().map(|authenticated| authenticated.access_token())
-        ).flatten();
+        let token = auth
+            .try_with(|a| {
+                a.authenticated()
+                    .map(|authenticated| authenticated.access_token())
+            })
+            .flatten();
 
         if let Some(access_token) = token {
-            form_data.append_with_str("access_token", access_token.as_str()).unwrap()
+            form_data
+                .append_with_str("access_token", access_token.as_str())
+                .unwrap()
         }
 
         // Upload file to server.
@@ -55,15 +56,13 @@ pub fn FileDrop(
     });
 
     let UseDropZoneReturn {
-        is_over_drop_zone,
-        ..
+        is_over_drop_zone, ..
     } = use_drop_zone_with_options(
         zone_ref,
         UseDropZoneOptions::default()
             .on_over(move |_| hovering.set(true))
             .on_drop(move |ev| {
-                let file = ev.files.first()
-                    .unwrap();
+                let file = ev.files.first().unwrap();
 
                 // Update file list
                 file_name_list.update(|list| {
@@ -79,7 +78,8 @@ pub fn FileDrop(
 
         // This runs when users select a file by clicking on the element. We aren't going
         // to link the file list with this input except to update it with new information.
-        let files = input_ref.get()
+        let files = input_ref
+            .get()
             .and_then(|input| input.files())
             .map(|list| {
                 (0..list.length())
@@ -122,12 +122,7 @@ pub fn FileDrop(
             </div>
             <div>"Drop a file here to upload"</div>
             <div class="text-sm text-gray-400">"Or click to select a file"</div>
-            <input
-                node_ref=input_ref
-                type="file"
-                class="hidden"
-                on:change=on_input_change
-            />
+            <input node_ref=input_ref type="file" class="hidden" on:change=on_input_change />
         </label>
         <For each=move || file_name_list.get() key=|file| file.clone() let:file>
             <div class="flex flex-row relative">