Update to svelte 5

svelte/src/filesystem/upload_widget/FSUploadWidget.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 export type UploadJob = {
 	task_id: number,
 	file: File,
@@ -14,9 +14,11 @@ import { tick } from "svelte";
 import UploadProgress from "./UploadProgress.svelte";
 import type { FSNavigator } from "filesystem/FSNavigator";
 
-export let nav: FSNavigator
+let { nav }: {
+	nav: FSNavigator;
+} = $props();
 
-let file_input_field: HTMLInputElement
+let file_input_field: HTMLInputElement = $state()
 let file_input_change = (e: Event) => {
 	// Start uploading the files async
 	upload_files((e.target as HTMLInputElement).files)
@@ -28,8 +30,8 @@ export const pick_files = () => {
 	file_input_field.click()
 }
 
-let visible = false
-let upload_queue: UploadJob[] = [];
+let visible = $state(false)
+let upload_queue: UploadJob[] = $state([]);
 let task_id_counter = 0
 
 export const upload_files = async (files: File[]|FileList) => {
@@ -76,8 +78,8 @@ export const upload_file = async (file: File) => {
 	// each upload progress bar will have bound itself to its array item
 	upload_queue = upload_queue
 
-	if (active_uploads === 0 && state !== "uploading") {
-		state = "uploading"
+	if (active_uploads === 0 && status !== "uploading") {
+		status = "uploading"
 		visible = true
 		await tick()
 		await start_upload()
@@ -85,7 +87,7 @@ export const upload_file = async (file: File) => {
 }
 
 let active_uploads = 0
-let state = "idle"
+let status = $state("idle")
 
 const start_upload = async () => {
 	active_uploads = 0
@@ -115,7 +117,7 @@ const start_upload = async () => {
 	}
 
 	if (active_uploads === 0) {
-		state = "finished"
+		status = "finished"
 		nav.reload()
 
 		// Empty the queue to free any references to lingering components
@@ -123,12 +125,12 @@ const start_upload = async () => {
 
 		// In ten seconds we close the popup
 		setTimeout(() => {
-			if (state === "finished") {
+			if (status === "finished") {
 				visible = false
 			}
 		}, 10000)
 	} else {
-		state = "uploading"
+		status = "uploading"
 	}
 }
 
@@ -139,7 +141,7 @@ const finish_upload = () => {
 }
 
 const leave_confirmation = (e: BeforeUnloadEvent) => {
-	if (state === "uploading") {
+	if (status === "uploading") {
 		e.preventDefault()
 		return "If you close this page your files will stop uploading. Do you want to continue?"
 	} else {
@@ -148,22 +150,22 @@ const leave_confirmation = (e: BeforeUnloadEvent) => {
 }
 </script>
 
-<svelte:window on:beforeunload={leave_confirmation} />
+<svelte:window onbeforeunload={leave_confirmation} />
 
 <input
 	bind:this={file_input_field}
-	on:change={file_input_change}
+	onchange={file_input_change}
 	class="upload_input" type="file" name="file" multiple
 />
 
 {#if visible}
 	<div class="upload_widget">
 		<div class="header">
-			{#if state === "idle"}
+			{#if status === "idle"}
 				Waiting for files
-			{:else if state === "uploading"}
+			{:else if status === "uploading"}
 				Uploading files...
-			{:else if state === "finished"}
+			{:else if status === "finished"}
 				Done
 			{/if}
 		</div>