Feature - Add upload functionality on Web (#231)

* Added file selector

* Extract metadata to upload files to the web

* Added request for uploading

* Generate jpeg/Webp thumbnail for asset uploaded without thumbnail data

* Added generating thumbnail for video and WebSocket broadcast after thumbnail is generated

* Added video length extraction

* Added Uploading Panel

* Added upload progress store and styling the uploaded asset

* Added condition to only show upload panel when there is upload in progress

* Remove asset from the upload list after successfully uploading

* Added WebSocket to listen to upload event on the web

* Added mechanism to check for existing assets before uploading on the web

* Added test workflow

* Update readme

web/src/lib/stores/upload.ts

@@ -0,0 +1,45 @@
+import { writable, derived } from 'svelte/store';
+import type { UploadAsset } from '../models/upload-asset';
+
+function createUploadStore() {
+	const uploadAssets = writable<Array<UploadAsset>>([]);
+
+	const { subscribe } = uploadAssets;
+
+	const isUploading = derived(uploadAssets, ($uploadAssets) => {
+		return $uploadAssets.length > 0 ? true : false;
+	});
+
+	const addNewUploadAsset = (newAsset: UploadAsset) => {
+		uploadAssets.update((currentSet) => [...currentSet, newAsset]);
+	};
+
+	const updateProgress = (id: string, progress: number) => {
+		uploadAssets.update((uploadingAssets) => {
+			return uploadingAssets.map((asset) => {
+				if (asset.id == id) {
+					return {
+						...asset,
+						progress: progress,
+					};
+				}
+
+				return asset;
+			});
+		});
+	};
+
+	const removeUploadAsset = (id: string) => {
+		uploadAssets.update((uploadingAsset) => uploadingAsset.filter((a) => a.id != id));
+	};
+
+	return {
+		subscribe,
+		isUploading,
+		addNewUploadAsset,
+		updateProgress,
+		removeUploadAsset,
+	};
+}
+
+export const uploadAssetsStore = createUploadStore();