Merge branch '19-implement-file-uploads' into 'main'

Resolve "Implement file uploads"

Closes #19

See merge request libretunes/libretunes!26

Cargo.lock

@@ -71,6 +71,12 @@ version = "1.7.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "69f7f8c3906b62b754cd5326047894316021dcfe5a194c8ea52bdd94934a3457"
 
+[[package]]
+name = "arrayvec"
+version = "0.7.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "96d30a06541fbafbc7f82ed10c06164cfbd2c401138f6addd8404629c4b16711"
+
 [[package]]
 name = "async-recursion"
 version = "1.1.0"
@@ -259,6 +265,12 @@ version = "3.15.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7ff69b9dd49fd426c69a0db9fc04dd934cdb6645ff000864d98f7e2af8830eaa"
 
+[[package]]
+name = "bytemuck"
+version = "1.15.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5d6d68c57235a3a081186990eca2867354726650f42f7516ca50c28d6281fd15"
+
 [[package]]
 name = "byteorder"
 version = "1.5.0"
@@ -1586,9 +1598,12 @@ dependencies = [
  "leptos_meta",
  "leptos_router",
  "log",
+ "multer",
  "openssl",
  "pbkdf2",
  "serde",
+ "server_fn",
+ "symphonia",
  "thiserror",
  "time",
  "tokio",
@@ -1597,6 +1612,7 @@ dependencies = [
  "tower-sessions",
  "tower-sessions-redis-store",
  "wasm-bindgen",
+ "web-sys",
 ]
 
 [[package]]
@@ -2374,9 +2390,9 @@ dependencies = [
 
 [[package]]
 name = "server_fn"
-version = "0.6.10"
+version = "0.6.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "15a46a2ffdecb81430ecfb995989218a18b6e94c1ead50cb806b5927c986a8ce"
+checksum = "536a5b959673643ee01e59ae41bf01425482c8070dee95d7061ee2d45296b59c"
 dependencies = [
  "axum",
  "bytes",
@@ -2390,6 +2406,7 @@ dependencies = [
  "hyper",
  "inventory",
  "js-sys",
+ "multer",
  "once_cell",
  "send_wrapper",
  "serde",
@@ -2495,6 +2512,55 @@ version = "2.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "81cdd64d312baedb58e21336b31bc043b77e01cc99033ce76ef539f78e965ebc"
 
+[[package]]
+name = "symphonia"
+version = "0.5.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "815c942ae7ee74737bb00f965fa5b5a2ac2ce7b6c01c0cc169bbeaf7abd5f5a9"
+dependencies = [
+ "lazy_static",
+ "symphonia-bundle-mp3",
+ "symphonia-core",
+ "symphonia-metadata",
+]
+
+[[package]]
+name = "symphonia-bundle-mp3"
+version = "0.5.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c01c2aae70f0f1fb096b6f0ff112a930b1fb3626178fba3ae68b09dce71706d4"
+dependencies = [
+ "lazy_static",
+ "log",
+ "symphonia-core",
+ "symphonia-metadata",
+]
+
+[[package]]
+name = "symphonia-core"
+version = "0.5.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "798306779e3dc7d5231bd5691f5a813496dc79d3f56bf82e25789f2094e022c3"
+dependencies = [
+ "arrayvec",
+ "bitflags 1.3.2",
+ "bytemuck",
+ "lazy_static",
+ "log",
+]
+
+[[package]]
+name = "symphonia-metadata"
+version = "0.5.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bc622b9841a10089c5b18e99eb904f4341615d5aa55bbf4eedde1be721a4023c"
+dependencies = [
+ "encoding_rs",
+ "lazy_static",
+ "log",
+ "symphonia-core",
+]
+
 [[package]]
 name = "syn"
 version = "1.0.109"

Cargo.toml

@@ -36,8 +36,12 @@ tower-sessions = { version = "0.11", default-features = false }
 tower-sessions-redis-store = { version = "0.11", optional = true }
 async-trait = "0.1.79"
 axum-login = { version = "0.14.0", optional = true }
+server_fn = { version = "0.6.11", features = ["multipart"] }
+symphonia = { version = "0.5.4", default-features = false, features = ["mp3"], optional = true }
+multer = { version = "3.0.0", optional = true }
 log = { version = "0.4.21", optional = true }
 flexi_logger = { version = "0.28.0", optional = true, default-features = false }
+web-sys = "0.3.69"
 
 [patch.crates-io]
 gloo-net = { git = "https://github.com/rustwasm/gloo.git", rev = "a823fab7ecc4068e9a28bd669da5eaf3f0a56380" }
@@ -63,6 +67,8 @@ ssr = [
   "tower-http",
   "tower-sessions-redis-store",
   "axum-login",
+  "symphonia",
+  "multer",
   "log",
   "flexi_logger",
 ]

src/app.rs

@@ -16,6 +16,7 @@ pub fn App() -> impl IntoView {
 
     let play_status = PlayStatus::default();
     let play_status = create_rw_signal(play_status);
+    let upload_open = create_rw_signal(false);
 
     view! {
         // injects a stylesheet into the document <head>
@@ -36,7 +37,7 @@ pub fn App() -> impl IntoView {
         }>
             <main>
                 <Routes>
-                    <Route path="" view=move || view! { <HomePage play_status=play_status/> }>
+                    <Route path="" view=move || view! { <HomePage play_status=play_status upload_open=upload_open/> }>
                         <Route path="" view=Dashboard />
                         <Route path="dashboard" view=Dashboard />
                         <Route path="search" view=Search />
@@ -53,13 +54,15 @@ use crate::components::sidebar::*;
 use crate::components::dashboard::*;
 use crate::components::search::*;
 use crate::components::personal::*;
+use crate::components::upload::*;
 
 /// Renders the home page of your application.
 #[component]
-fn HomePage(play_status: RwSignal<PlayStatus>) -> impl IntoView {
+fn HomePage(play_status: RwSignal<PlayStatus>, upload_open: RwSignal<bool>) -> impl IntoView {
     view! {
         <div class="home-container">
-            <Sidebar />
+            <Upload open=upload_open/>
+            <Sidebar upload_open=upload_open/>
             // This <Outlet /> will render the child route components
             <Outlet />
             <Personal />

src/components.rs

@@ -2,3 +2,4 @@ pub mod sidebar;
 pub mod dashboard;
 pub mod search;
 pub mod personal;
+pub mod upload;

src/components/sidebar.rs

@@ -1,9 +1,10 @@
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
+use crate::components::upload::*;
 
 #[component]
-pub fn Sidebar() -> impl IntoView {
+pub fn Sidebar(upload_open: RwSignal<bool>) -> impl IntoView {
     use leptos_router::use_location;
     let location = use_location();
 
@@ -19,6 +20,7 @@ pub fn Sidebar() -> impl IntoView {
         <div class="sidebar-container">
             <div class="sidebar-top-container">
                 <h2 class="header">LibreTunes</h2>
+                <UploadBtn dialog_open=upload_open />
                 <a class="buttons" href="/dashboard" style={move || if on_dashboard() {"color: #e1e3e1"} else {""}} >
                     <Icon icon=icondata::OcHomeFillLg />
                     <h1>Dashboard</h1>

src/components/upload.rs

@@ -0,0 +1,245 @@
+use std::rc::Rc;
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_icons::*;
+use leptos_router::Form;
+use web_sys::Response;
+use crate::search::search_artists;
+use crate::search::search_albums;
+use crate::models::Artist;
+use crate::models::Album;
+
+#[component]
+pub fn UploadBtn(dialog_open: RwSignal<bool>) -> impl IntoView {
+	let open_dialog = move |_| {
+		dialog_open.set(true);
+	};
+
+	view! {
+		<button class="upload-btn" on:click=open_dialog>
+			<div class="add-sign">
+				<Icon icon=icondata::IoAddSharp />
+			</div>
+			Upload
+		</button>
+	}
+}
+
+#[component]
+pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
+	// Create signals for the artist input and the filtered artists
+	let (artists, set_artists) = create_signal("".to_string());
+	let (filtered_artists, set_filtered_artists)  = create_signal(vec![]);
+
+	let (albums, set_albums) = create_signal("".to_string());
+	let (filtered_albums, set_filtered_albums) = create_signal(vec![]);
+
+	let (error_msg, set_error_msg) = create_signal::<Option<String>>(None);
+
+	let close_dialog = move |ev: leptos::ev::MouseEvent| {
+		ev.prevent_default();
+		open.set(false);
+	};
+	// Create a filter function to handle filtering artists
+	// Allow users to search for artists by name, converts the artist name to artist id to be handed off to backend
+	let handle_filter_artists = move |ev: leptos::ev::Event| {
+		ev.prevent_default();
+
+		let artist_input: String = event_target_value(&ev);
+
+		//Get the artist that we are currently searching for
+		let mut all_artists: Vec<&str> = artist_input.split(",").collect();
+		let search = all_artists.pop().unwrap().to_string();
+		
+		//Update the artist signal with the input
+		set_artists.update(|value: &mut String| *value = artist_input);
+
+		spawn_local(async move {
+			let filter_results = search_artists(search, 3).await;
+			if let Err(err) = filter_results {
+				log!("Error filtering artists: {:?}", err);
+			} else if let Ok(artists) = filter_results {
+				log!("Filtered artists: {:?}", artists);
+
+				set_filtered_artists.update(|value| *value = artists);
+			}
+		})
+	};
+	// Create a filter function to handle filtering albums
+	// Allow users to search for albums by title, converts the album title to album id to be handed off to backend
+	let handle_filter_albums = move |ev: leptos::ev::Event| {
+		ev.prevent_default();
+
+		let album_input: String = event_target_value(&ev);
+		
+		//Update the album signal with the input
+		set_albums.update(|value: &mut String| *value = album_input);
+
+		spawn_local(async move {
+			let filter_results = search_albums(albums.get_untracked(), 3).await;
+			if let Err(err) = filter_results {
+				log!("Error filtering albums: {:?}", err);
+			} else if let Ok(albums) = filter_results {
+				log!("Filtered albums: {:?}", albums);
+				set_filtered_albums.update(|value| *value = albums);
+			}
+		})
+	};
+
+	let handle_response = Rc::new(move |response: &Response| {
+		if response.ok() {
+			set_error_msg.update(|value| *value = None);
+			set_filtered_artists.update(|value| *value = vec![]);
+			set_filtered_albums.update(|value| *value = vec![]);
+			set_artists.update(|value| *value = "".to_string());
+			set_albums.update(|value| *value = "".to_string());
+			open.set(false);
+		} else {
+			// TODO: Extract error message from response
+			set_error_msg.update(|value| *value = Some("Error uploading song".to_string()));
+		}
+	});
+
+	view! {
+		<Show when=open fallback=move || view! {}>
+			<div class="upload-container" open=open>
+				<div class="close-button" on:click=close_dialog><Icon icon=icondata::IoClose /></div>
+				<div class="upload-header">
+					<h1>Upload Song</h1>
+				</div>
+				<Form action="/api/upload" method="POST" enctype=String::from("multipart/form-data")
+					class="upload-form" on_response=handle_response.clone()>
+					<div class="input-bx">
+						<input type="text" name="title" required class="text-input" required/>
+						<span>Title</span>
+					</div>
+					<div class="artists has-search">
+						<div class="input-bx">
+							<input type="text" name="artist_ids" class="text-input" prop:value=artists on:input=handle_filter_artists/>
+							<span>Artists</span>
+						</div>
+						<Show
+							when=move || {filtered_artists.get().len() > 0}
+							fallback=move || view! {}						
+						>
+							<ul class="artist_results search-results">
+								{
+									move || filtered_artists.get().iter().enumerate().map(|(_index,filtered_artist)| view! {
+										<Artist artist=filtered_artist.clone() artists=artists set_artists=set_artists set_filtered=set_filtered_artists/>
+									}).collect::<Vec<_>>()
+								}
+							</ul>
+						</Show>
+					</div>
+					<div class="albums has-search">
+						<div class="input-bx">
+							<input type="text" name="album_id" class="text-input" prop:value=albums on:input=handle_filter_albums/>
+							<span>Album ID</span>
+						</div>
+						<Show
+							when=move || {filtered_albums.get().len() > 0}
+							fallback=move || view! {}						
+						>
+							<ul class="album_results search-results">
+								{
+									move || filtered_albums.get().iter().enumerate().map(|(_index,filtered_album)| view! {
+										<Album album=filtered_album.clone() _albums=albums set_albums=set_albums set_filtered=set_filtered_albums/>
+									}).collect::<Vec<_>>()
+								}
+							</ul>
+						</Show>
+					</div>
+					
+					<div class="input-bx">
+						<input type="number" name="track_number" class="text-input"/>
+						<span>Track Number</span>
+					</div>
+					<div class="release-date">
+						<div class="left">
+							<span>Release</span>
+							<span>Date</span>
+						</div>
+						<input class="info" type="date" name="release_date"/>
+					</div>
+					<div class="file">
+						<span>File</span>
+						<input class="info" type="file" accept=".mp3" name="file" required/>
+					</div>
+					<button type="submit" class="upload-button">Upload</button>
+				</Form>
+				<Show
+					when=move || {error_msg.get().is_some()}
+					fallback=move || view! {}
+				>
+					<div class="error-msg">
+						<Icon icon=icondata::IoAlertCircleSharp />
+						{error_msg.get().as_ref().unwrap()}
+					</div>
+				</Show>
+			</div>
+		</Show>
+	}
+}
+
+#[component]
+pub fn Artist(artist: Artist, artists: ReadSignal<String>, set_artists: WriteSignal<String>, set_filtered: WriteSignal<Vec<Artist>>) -> impl IntoView {
+	// Converts artist name to artist id and adds it to the artist input
+	let add_artist = move |_| {
+		//Create an empty string to hold previous artist ids
+		let mut s: String = String::from("");
+		//Get the current artist input
+		let all_artirts: String = artists.get();
+		//Split the input into a vector of artists separated by commas
+		let mut ids: Vec<&str> = all_artirts.split(",").collect();
+		//If there is only one artist in the input, get their id equivalent and add it to the string
+		if ids.len() == 1 {
+			let value_str = match artist.id.clone() {
+				Some(v) => v.to_string(),
+				None => String::from("None"),
+			};
+			s.push_str(&value_str);
+			s.push_str(",");
+			set_artists.update(|value| *value = s);
+		//If there are multiple artists in the input, pop the last artist by string off the vector, 
+		//get their id equivalent, and add it to the string
+		} else {
+			ids.pop();
+			for id in ids {
+				s.push_str(id);
+				s.push_str(",");
+			}
+			let value_str = match artist.id.clone() {
+				Some(v) => v.to_string(),
+				None => String::from("None"),
+			};
+			s.push_str(&value_str);
+			s.push_str(",");
+			set_artists.update(|value| *value = s);
+		}
+		//Clear the search results
+		set_filtered.update(|value| *value = vec![]);
+	};
+
+	view! {
+		<div class="artist result" on:click=add_artist>
+			{artist.name.clone()}
+		</div>
+	}
+}
+#[component]
+pub fn Album(album: Album, _albums: ReadSignal<String>, set_albums: WriteSignal<String>, set_filtered: WriteSignal<Vec<Album>>) -> impl IntoView {
+	//Converts album title to album id to upload a song
+	let add_album = move |_| {
+		let value_str = match album.id.clone() {
+			Some(v) => v.to_string(),
+			None => String::from("None"),
+		};
+		set_albums.update(|value| *value = value_str);
+		set_filtered.update(|value| *value = vec![]);
+	};
+	view! {
+		<div class="album result" on:click=add_album>
+			{album.title.clone()}
+		</div>
+	}
+}

src/lib.rs

@@ -13,6 +13,9 @@ pub mod users;
 pub mod search;
 pub mod fileserv;
 pub mod error_template;
+pub mod upload;
+pub mod util;
+
 use cfg_if::cfg_if;
 
 cfg_if! {

src/models.rs

@@ -44,10 +44,10 @@ pub struct User {
 }
 
 /// Model for an artist
-#[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable))]
+#[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable, Identifiable))]
 #[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::artists))]
 #[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))]
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone, Debug)]
 pub struct Artist {
 	/// A unique id for the artist
 	#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]
@@ -165,10 +165,10 @@ impl Artist {
 }
 
 /// Model for an album
-#[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable))]
+#[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable, Identifiable))]
 #[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::albums))]
 #[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))]
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone, Debug)]
 pub struct Album {
 	/// A unique id for the album
 	#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]

src/upload.rs

@@ -0,0 +1,294 @@
+use leptos::*;
+use server_fn::codec::{MultipartData, MultipartFormData};
+
+use cfg_if::cfg_if;
+
+cfg_if! {
+	if #[cfg(feature = "ssr")] {
+		use multer::Field;
+		use crate::database::get_db_conn;
+		use diesel::prelude::*;
+		use log::*;
+		use server_fn::error::NoCustomError;
+		use time::Date;
+	}
+}
+
+/// Extract the text from a multipart field
+#[cfg(feature = "ssr")]
+async fn extract_field(field: Field<'static>) -> Result<String, ServerFnError> {
+	let field = match field.text().await {
+		Ok(field) => field,
+		Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading field: {}", e)))?,
+	};
+
+	Ok(field)
+}
+
+/// Validate the artist ids in a multipart field
+/// Expects a field with a comma-separated list of artist ids, and ensures each is a valid artist id in the database
+#[cfg(feature = "ssr")]
+async fn validate_artist_ids(artist_ids: Field<'static>) -> Result<Vec<i32>, ServerFnError> {
+    use crate::models::Artist;
+	use diesel::result::Error::NotFound;
+
+	// Extract the artist id from the field
+	match artist_ids.text().await {
+		Ok(artist_ids) => {
+			let artist_ids = artist_ids.trim_end_matches(',').split(',');
+
+			artist_ids.filter(|artist_id| !artist_id.is_empty()).map(|artist_id| {
+				// Parse the artist id as an integer
+				if let Ok(artist_id) = artist_id.parse::<i32>() {
+					// Check if the artist exists
+					let db_con = &mut get_db_conn();
+					let artist = crate::schema::artists::dsl::artists.find(artist_id).first::<Artist>(db_con);
+
+					match artist {
+						Ok(_) => Ok(artist_id),
+						Err(NotFound) => Err(ServerFnError::<NoCustomError>::
+							ServerError("Artist does not exist".to_string())),
+						Err(e) => Err(ServerFnError::<NoCustomError>::
+							ServerError(format!("Error finding artist id: {}", e))),
+					}
+				} else {
+					Err(ServerFnError::<NoCustomError>::ServerError("Error parsing artist id".to_string()))
+				}
+			}).collect()
+		},
+
+		Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading artist id: {}", e))),
+	}
+}
+
+/// Validate the album id in a multipart field
+/// Expects a field with an album id, and ensures it is a valid album id in the database
+#[cfg(feature = "ssr")]
+async fn validate_album_id(album_id: Field<'static>) -> Result<Option<i32>, ServerFnError> {
+	use crate::models::Album;
+	use diesel::result::Error::NotFound;
+
+	// Extract the album id from the field
+	match album_id.text().await {
+		Ok(album_id) => {
+			if album_id.is_empty() {
+				return Ok(None);
+			}
+
+			// Parse the album id as an integer
+			if let Ok(album_id) = album_id.parse::<i32>() {
+				// Check if the album exists
+				let db_con = &mut get_db_conn();
+				let album = crate::schema::albums::dsl::albums.find(album_id).first::<Album>(db_con);
+
+				match album {
+					Ok(_) => Ok(Some(album_id)),
+					Err(NotFound) => Err(ServerFnError::<NoCustomError>::
+						ServerError("Album does not exist".to_string())),
+					Err(e) => Err(ServerFnError::<NoCustomError>::
+						ServerError(format!("Error finding album id: {}", e))),
+				}
+			} else {
+				Err(ServerFnError::<NoCustomError>::ServerError("Error parsing album id".to_string()))
+			}
+		},
+		Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading album id: {}", e))),
+	}
+}
+
+/// Validate the track number in a multipart field
+/// Expects a field with a track number, and ensures it is a valid track number (non-negative integer)
+#[cfg(feature = "ssr")]
+async fn validate_track_number(track_number: Field<'static>) -> Result<Option<i32>, ServerFnError> {
+	match track_number.text().await {
+		Ok(track_number) => {
+			if track_number.is_empty() {
+				return Ok(None);
+			}
+
+			if let Ok(track_number) = track_number.parse::<i32>() {
+				if track_number < 0 {
+					return Err(ServerFnError::<NoCustomError>::
+						ServerError("Track number must be positive or 0".to_string()));
+				} else {
+					Ok(Some(track_number))
+				}
+			} else {
+				return Err(ServerFnError::<NoCustomError>::ServerError("Error parsing track number".to_string()));
+			}
+		},
+		Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading track number: {}", e)))?,
+	}
+}
+
+/// Validate the release date in a multipart field
+/// Expects a field with a release date, and ensures it is a valid date in the format [year]-[month]-[day]
+#[cfg(feature = "ssr")]
+async fn validate_release_date(release_date: Field<'static>) -> Result<Option<Date>, ServerFnError> {
+	match release_date.text().await {
+		Ok(release_date) => {
+			if release_date.trim().is_empty() {
+				return Ok(None);
+			}
+
+			let date_format = time::macros::format_description!("[year]-[month]-[day]");
+			let release_date = Date::parse(&release_date.trim(), date_format);
+
+			match release_date {
+				Ok(release_date) => Ok(Some(release_date)),
+				Err(_) => Err(ServerFnError::<NoCustomError>::ServerError("Invalid release date".to_string())),
+			}
+		},
+		Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading release date: {}", e))),
+	}
+}
+
+/// Handle the file upload form
+#[server(input = MultipartFormData, endpoint = "/upload")]
+pub async fn upload(data: MultipartData) -> Result<(), ServerFnError> {
+	// Safe to unwrap - "On the server side, this always returns Some(_). On the client side, always returns None."
+	let mut data = data.into_inner().unwrap();
+
+	let mut title = None;
+	let mut artist_ids = None;
+	let mut album_id = None;
+	let mut track = None;
+	let mut release_date = None;
+	let mut file_name = None;
+	let mut duration = None;
+
+	// Fetch the fields from the form data
+	while let Ok(Some(mut field)) = data.next_field().await {
+		let name = field.name().unwrap_or_default().to_string();
+
+		match name.as_str() {
+			"title" => { title = Some(extract_field(field).await?); },
+			"artist_ids" => { artist_ids = Some(validate_artist_ids(field).await?); },
+			"album_id" => { album_id = Some(validate_album_id(field).await?); },
+			"track_number" => { track = Some(validate_track_number(field).await?); },
+			"release_date" => { release_date = Some(validate_release_date(field).await?); },
+			"file" => {
+				use symphonia::core::codecs::CODEC_TYPE_MP3;
+				use crate::util::audio::extract_metadata;
+				use std::fs::OpenOptions;
+				use std::io::{Seek, Write};
+
+				// Some logging is done here where there is high potential for bugs / failures,
+				// or behavior that we may wish to change in the future
+
+				// Create file name
+				let title = title.clone().ok_or(ServerFnError::<NoCustomError>::
+					ServerError("Title field required and must precede file field".to_string()))?;
+
+				let clean_title = title.replace(" ", "_").replace("/", "_");
+				let date_format = time::macros::format_description!("[year]-[month]-[day]_[hour]:[minute]:[second]");
+				let date_str = time::OffsetDateTime::now_utc().format(date_format).unwrap_or_default();
+				let upload_path = format!("assets/audio/upload-{}_{}.mp3", date_str, clean_title);
+				file_name = Some(format!("upload-{}_{}.mp3", date_str, clean_title));
+
+				debug!("Saving uploaded file {}", upload_path);
+
+				// Save file to disk
+				// Use these open options to create the file, write to it, then read from it
+				let mut file = OpenOptions::new()
+					.read(true)
+					.write(true)
+					.create(true)
+					.open(upload_path.clone())?;
+
+				while let Some(chunk) = field.chunk().await? {
+					file.write(&chunk)?;
+				}
+
+				file.flush()?;
+
+				// Rewind the file so the duration can be measured
+				file.rewind()?;
+
+				// Get the codec and duration of the file
+				let (file_codec, file_duration) = extract_metadata(file)
+					.map_err(|e| {
+						let msg = format!("Error measuring duration of audio file {}: {}", upload_path, e);
+						warn!("{}", msg);
+						ServerFnError::<NoCustomError>::ServerError(msg)
+					})?;
+
+				if file_codec != CODEC_TYPE_MP3 {
+					let msg = format!("Invalid uploaded audio file codec: {}", file_codec);
+					warn!("{}", msg);
+					return Err(ServerFnError::<NoCustomError>::ServerError(msg));
+				}
+
+				duration = Some(file_duration);
+			},
+			_ => {
+				warn!("Unknown file upload field: {}", name);
+			}
+		}
+	}
+
+	// Unwrap mandatory fields
+	let title = title.ok_or(ServerFnError::<NoCustomError>::ServerError("Missing title".to_string()))?;
+	let artist_ids = artist_ids.unwrap_or(vec![]);
+	let file_name = file_name.ok_or(ServerFnError::<NoCustomError>::ServerError("Missing file".to_string()))?;
+	let duration = duration.ok_or(ServerFnError::<NoCustomError>::ServerError("Missing duration".to_string()))?;
+	let duration = i32::try_from(duration).map_err(|e| ServerFnError::<NoCustomError>::
+		ServerError(format!("Error converting duration to i32: {}", e)))?;
+
+	let album_id = album_id.unwrap_or(None);
+	let track = track.unwrap_or(None);
+	let release_date = release_date.unwrap_or(None);
+
+	if album_id.is_some() != track.is_some() {
+		return Err(ServerFnError::<NoCustomError>
+			::ServerError("Album id and track number must both be present or both be absent".to_string()));
+	}
+
+	// Create the song
+	use crate::models::Song;
+	let song = Song {
+		id: None,
+		title,
+		album_id,
+		track,
+		duration,
+		release_date,
+		storage_path: file_name,
+		image_path: None,
+	};
+
+	// Save the song to the database
+	let db_con = &mut get_db_conn();
+	let song = song.insert_into(crate::schema::songs::table)
+		.get_result::<Song>(db_con)
+		.map_err(|e| {
+			let msg = format!("Error saving song to database: {}", e);
+			warn!("{}", msg);
+			ServerFnError::<NoCustomError>::ServerError(msg)
+		})?;
+
+	// Save the song's artists to the database
+	let song_id = song.id.ok_or_else(|| {
+		let msg = "Error saving song to database: song id not found after insertion".to_string();
+		warn!("{}", msg);
+		ServerFnError::<NoCustomError>::ServerError(msg)
+	})?;
+
+	use crate::schema::song_artists;
+	use diesel::ExpressionMethods;
+
+	let artist_ids = artist_ids.into_iter().map(|artist_id| {
+		(song_artists::song_id.eq(song_id), song_artists::artist_id.eq(artist_id))
+	}).collect::<Vec<_>>();
+
+	diesel::insert_into(crate::schema::song_artists::table)
+		.values(&artist_ids)
+		.execute(db_con)
+		.map_err(|e| {
+			let msg = format!("Error saving song artists to database: {}", e);
+			warn!("{}", msg);
+			ServerFnError::<NoCustomError>::ServerError(msg)
+		})?;
+
+	Ok(())
+}

src/util/audio.rs

@@ -0,0 +1,37 @@
+use symphonia::core::codecs::CodecType;
+use symphonia::core::formats::FormatOptions;
+use symphonia::core::io::MediaSourceStream;
+use symphonia::core::meta::MetadataOptions;
+use symphonia::core::probe::Hint;
+use std::fs::File;
+
+/// Extract the codec and duration of an audio file
+/// This is combined into one function because the file object will be consumed
+pub fn extract_metadata(file: File) -> Result<(CodecType, u64), Box<dyn std::error::Error>> {
+	let source_stream = MediaSourceStream::new(Box::new(file), Default::default());
+
+	let hint = Hint::new();
+	let format_opts = FormatOptions::default();
+	let metadata_opts = MetadataOptions::default();
+
+	let probe = symphonia::default::get_probe().format(&hint, source_stream, &format_opts, &metadata_opts)?;
+	let reader = probe.format;
+
+	if reader.tracks().len() != 1 {
+		return Err(format!("Expected 1 track, found {}", reader.tracks().len()).into())
+	}
+
+	let track = &reader.tracks()[0];
+
+	let time_base = track.codec_params.time_base.ok_or("Missing time base")?;
+	let duration = track.codec_params.n_frames
+		.map(|frames| track.codec_params.start_ts + frames)
+		.ok_or("Missing number of frames")?;
+
+	let duration = duration
+		.checked_mul(time_base.numer as u64)
+		.and_then(|v| v.checked_div(time_base.denom as u64))
+		.ok_or("Overflow while computing duration")?;
+
+	Ok((track.codec_params.codec, duration))
+}

src/util/mod.rs

@@ -0,0 +1,7 @@
+use cfg_if::cfg_if;
+
+cfg_if! {
+	if #[cfg(feature = "ssr")] {
+		pub mod audio;
+	}
+}

style/main.scss

@@ -8,6 +8,7 @@
 @import 'home.scss';
 @import 'search.scss';
 @import 'personal.scss';
+@import 'upload.scss';
 
 body {
   font-family: sans-serif;

style/sidebar.scss

@@ -4,68 +4,20 @@
   background-color: transparent;
   width: 22rem;
   height: calc(100% - 75px);
-}
+  .sidebar-top-container {
-
+    border-radius: 1rem;
-.sidebar-top-container {
+    background-color: #1c1c1c;
-  border-radius: 1rem;
+    height: 9rem;
-  background-color: #1c1c1c;
+    margin: 3px;
-  height: 9rem;
+    padding: 0.1rem 1rem 1rem 1rem;
-  margin: 3px;
+    position: relative;
-  padding: 0.1rem 1rem 1rem 1rem;
-}
-
-.sidebar-top-container .header {
-  font-size: 1.2rem;
-}
-.sidebar-top-container .buttons {
-  display: flex;
-  flex-direction: row;
-  font-size: 1.8rem;
-  align-items: center;
-  transition: all 0.5s;
-  cursor: pointer;
-  color: grey;
-  text-decoration: none;
-}
-.sidebar-top-container .buttons:hover {
-  color: white;
-}
-
-.sidebar-top-container .buttons:last-child {
-  margin-left: 0.02rem;
-  margin-top: 0.5rem;
-}
-
-.sidebar-top-container h1 {
-  font-size: 0.95rem;
-  margin-left: 0.9rem;
-  font-weight: 400;
-  font-style: $standard-font;
-  letter-spacing: 0.5px;
-}
-
-.sidebar-bottom-container {
-  border-radius: 1rem;
-  background-color: #1c1c1c;
-  margin: 3px;
-  margin-top: 6px;
-  padding: 0.2rem 1rem 1rem 1rem;
-  height: calc(100% - 9rem);
-
-  .heading {
-    display: flex;
-    flex-direction: row;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-
     .header {
       font-size: 1.2rem;
-      font-weight: 200;
     }
-
+    .upload-btn {
-    .add-playlist {
+      position: absolute;
+      top: 10px;
+      right: 7px;
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -74,8 +26,8 @@
       border-radius: 50px;
       border: none;
       height: 2.2rem;
-      padding-right: 2rem;
+      padding-right: 1rem;
-      padding-left: 2rem;
+      padding-left: 1rem;
       cursor: pointer;
       transition: background-color 0.3s ease;
       .add-sign {
@@ -85,8 +37,80 @@
         color: white;
       }
     }
-    .add-playlist:hover {
+    .upload-btn:hover {
       background-color: #9e9e9e;
     }
+    .buttons {
+      display: flex;
+      flex-direction: row;
+      font-size: 1.8rem;
+      align-items: center;
+      transition: all 0.5s;
+      cursor: pointer;
+      color: grey;
+      text-decoration: none;
+    }
+    .buttons:hover {
+      color: white;
+    }
+    .buttons:last-child {
+      margin-left: 0.02rem;
+      margin-top: 0.5rem;
+    }
+    h1 {
+      font-size: 0.95rem;
+      margin-left: 0.9rem;
+      font-weight: 400;
+      font-style: $standard-font;
+      letter-spacing: 0.5px;
+    }
+  }
+  .sidebar-bottom-container {
+    border-radius: 1rem;
+    background-color: #1c1c1c;
+    margin: 3px;
+    margin-top: 6px;
+    padding: 0.2rem 1rem 1rem 1rem;
+    height: calc(100% - 9rem);
+  
+    .heading {
+      display: flex;
+      flex-direction: row;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+  
+      .header {
+        font-size: 1.2rem;
+        font-weight: 200;
+      }
+  
+      .add-playlist {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.9rem;
+        border-radius: 50px;
+        border: none;
+        height: 2.2rem;
+        padding-right: 2rem;
+        padding-left: 2rem;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+        .add-sign {
+          font-size: 1.5rem;
+          margin-top: auto;
+          margin-right: 5px;
+          color: white;
+        }
+      }
+      .add-playlist:hover {
+        background-color: #9e9e9e;
+      }
+    }
   }  
 }
+
+

style/upload.scss

@@ -0,0 +1,188 @@
+@import "theme.scss";
+
+.upload-container {
+    position: fixed;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 30rem;
+    height: 30rem;
+    border: 1px solid white;
+    border-radius: 5px;
+    padding: 1rem;
+    padding-top: 0;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    background-color: #1c1c1c;
+    .close-button {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 50%;
+        font-size: 1.6rem;
+        transition: all 0.3s;
+        border: none;
+
+    }
+
+    .close-button:hover {
+    transform: scale(1.1);
+    background-color: rgba(255, 255, 255, 0.1);
+    }
+    .close-button:active {
+    transform: scale(0.8);
+    }
+    .upload-header {
+        font-size: .7rem;
+        font-weight: 300;
+        padding-bottom: 0;
+        border-bottom: 1px solid white;
+        font-family: "Roboto", sans-serif;
+    }
+    .upload-form {
+        padding: .1rem;
+        display: flex;
+        flex-direction: column;
+        .input-bx{
+            margin-top: 1rem;
+            position: relative;
+            width: 300px;
+            input{
+                width: 100%;
+                padding: 10px;
+                border: 2px solid #7f8fa6;
+                border-radius: 5px;
+                outline: none;
+                font-size: 1rem;
+                transition: 0.6s;
+                background-color: transparent;
+            }
+            span{
+                position: absolute;
+                left: 0;
+                top: 1px;
+                padding: 10px;
+                font-size: 1rem;
+                color: #7f8fa6;
+                text-transform: uppercase;
+                pointer-events: none;
+                transition: 0.6s;
+                background-color: transparent;
+            }
+            input:valid ~ span,
+            input:focus ~ span{
+                color: #fff;
+                transform: translateX(10px) translateY(-7px);
+                font-size: 0.65rem;
+                font-weight: 600;
+                padding: 0 10px;
+                background: #1c1c1c;
+                letter-spacing: 0.1rem;
+            }
+            input:valid,
+            input:focus{
+                color: #fff;
+                border: 2px solid #fff;
+            }
+        }
+        .release-date {
+            margin-top: 1rem;
+            font-size: 1.2rem;
+            color: #7f8fa6;
+            font-family: "Roboto", sans-serif;
+            display: flex;
+            align-items: center;
+            .left {
+                display: flex;
+                flex-direction: column;
+                margin-left: 5px;
+                margin-right: 10px;
+            }
+            span {
+                font-size: .85rem;
+            }
+            input {
+                padding: 8px;
+            }
+        }
+        .file {
+            margin-top: .5rem;
+            display: flex;
+            align-items: center;
+            span {
+                font-size: .9rem;
+                color: #7f8fa6;
+                font-family: "Roboto", sans-serif;
+                margin-left: 5px;
+                margin-right: 10px;
+            }
+            input {
+                padding: 10px;
+            }
+        }
+        .upload-button {
+            margin-top: 1rem;
+            padding: 10px;
+            background-color: #7f8fa6;
+            color: #fff;
+            font-size: 1rem;
+            font-family: "Roboto", sans-serif;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: 0.3s;
+            &:hover {
+                background-color: #fff;
+                color: #7f8fa6;
+            }
+        }
+        .has-search {
+            position: relative;
+            width: 325px;
+            .search-results {
+                display: flex;
+                flex-direction: column;
+                border: 1px solid white;
+                width: 100%;
+                position: absolute;
+                top: 75%;
+                background-color: #1c1c1c;
+                z-index: 2;
+                border-radius: 5px;
+                padding: 0;
+                .result {
+                    border-bottom: 1px solid white; 
+                    padding: 10px;
+                    cursor: pointer;
+                    transition: 0.3s;
+                    &:hover {
+                        background-color: #7f8fa6;
+                    }
+                }
+                .result:last-child {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+
+    .error-msg {
+        padding-top: 10px;
+        color: red;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        svg {
+            width: 20px;
+            height: 20px;
+            margin-right: 5px;
+        }
+    }
+}