Improved the upload UI to give more feedback

backend/src/api/demos.rs

@@ -89,13 +89,13 @@ async fn upload(
     State(state): State<Arc<DemoState>>,
     session: crate::UserSession,
     mut form: axum::extract::Multipart,
-) -> Result<axum::response::Redirect, (axum::http::StatusCode, String)> {
+) -> Result<(), (axum::http::StatusCode, String)> {
     let steam_id = session
         .data()
         .steam_id
         .ok_or_else(|| (axum::http::StatusCode::UNAUTHORIZED, "Not logged in".into()))?;
 
-    tracing::info!("Upload for Session: {:?}", steam_id);
+    tracing::info!("Starting upload for Session: {:?}", steam_id);
 
     let file_field = loop {
         let field = match form.next_field().await {
@@ -124,14 +124,19 @@ async fn upload(
         .upload(
             steam_id.to_string(),
             demo_id.clone(),
-            file_field.filter_map(|b| async { b.ok() }).boxed(),
+            file_field
+                .filter_map(|b| async { b.ok() })
+                .inspect(|b| {
+                    tracing::debug!("Received {} bytes", b.len());
+                })
+                .boxed(),
         )
         .await
         .map_err(|e| (axum::http::StatusCode::INTERNAL_SERVER_ERROR, e))?;
 
-    let mut db_con = crate::db_connection().await;
+    tracing::info!("Saved to storage");
 
-    // Turn all of this into a single transaction
+    let mut db_con = crate::db_connection().await;
 
     let db_trans_result = db_con
         .build_transaction()
@@ -168,7 +173,9 @@ async fn upload(
         tracing::error!("Inserting data into db: {:?}", e);
     }
 
-    Ok(axum::response::Redirect::to("/"))
+    tracing::info!("Done with upload");
+
+    Ok(())
 }
 
 #[tracing::instrument(skip(session))]

frontend/src/lib.rs

@@ -29,7 +29,7 @@ pub fn upload_demo(
             left: 25vw;
             top: 15vh;
             width: 48vw;
-            height: 18vh;
+            min-height: 18vh;
             padding: 1vh 1vw;
 
             color: #f1f1f1;
@@ -40,23 +40,53 @@ pub fn upload_demo(
             display: none;
         }
 
-        .container.shown {
+        .hidden {
+            display: none;
+        }
+        .shown {
             display: block;
         }
     };
 
+    let uploading = RwSignal::new(false);
+
+    let handle_resp: std::rc::Rc<dyn Fn(&leptos::web_sys::Response)> = std::rc::Rc::new(move |resp: &leptos::web_sys::Response| {
+        if resp.status() != 200 {
+            // TODO
+            // Display error somehow
+            return;
+        }
+
+        uploading.set(false);
+
+        // Remove the Upload popup
+        update_shown.set(DemoUploadStatus::Hidden);
+
+        // TOOD
+        // Reload the demo list
+    });
+
+    let on_submit: std::rc::Rc<dyn Fn(&leptos::web_sys::FormData)> = std::rc::Rc::new(move |_| {
+        uploading.set(true);
+    });
+
     view! {class = style,
         <div class="container" class:shown=move || shown() == DemoUploadStatus::Shown>
             <h3>Upload a Demo</h3>
 
-            <Form action="/api/demos/upload" method="post" enctype="multipart/form-data".to_string()>
-                <p> Select File to upload </p>
+            <Form action="/api/demos/upload" method="post" enctype="multipart/form-data".to_string() on_response=handle_resp on_form_data=on_submit>
+                <p> Select Demo to upload </p>
                 <input type="file" name="demo" id="demo"></input>
-                <input type="submit" value="Upload Image" name="submit"></input>
+                <input type="submit" value="Upload Demo" name="submit"></input>
             </Form>
             <button on:click=move |_| update_shown(DemoUploadStatus::Hidden)>
                 Close
             </button>
+
+            <p 
+                class:shown=move || uploading.get()
+                class:hidden=move || !uploading.get()
+            >Uploading...</p>
         </div>
     }
 }