feat: File Upload Progress

.changeset/eager-news-serve.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': minor
+---
+
+feat: file upload progress is available via `myForm.fields.someFile.progress()`

packages/kit/src/exports/public.d.ts

@@ -1930,7 +1930,19 @@ type RemoteFormFieldMethods<T> = {
 	set(input: DeepPartial<T>): DeepPartial<T>;
 	/** Validation issues, if any */
 	issues(): RemoteFormIssue[] | undefined;
-};
+} & (T extends File
+	? {
+			/** Current file upload progress */
+			progress(): {
+				/** Percentage of upload progress, from 0.0 to 1.0 */
+				readonly percent: number;
+				/** Bytes uploaded so far */
+				readonly uploaded: number;
+				/** Total bytes to upload */
+				readonly total: number;
+			};
+		}
+	: unknown);
 
 export type RemoteFormFieldValue = string | string[] | number | boolean | File | File[];
 

packages/kit/src/runtime/app/server/remote/form.js

@@ -178,26 +178,33 @@ export function form(validate_or_fn, maybe_fn) {
 			get() {
 				return create_field_proxy(
 					{},
-					() => get_cache(__)?.['']?.data?.input ?? {},
-					(path, value) => {
-						const cache = get_cache(__);
-						const entry = cache[''];
-
-						if (entry?.data?.submission) {
-							// don't override a submission
-							return;
-						}
-
-						if (path.length === 0) {
-							(cache[''] ??= { serialize: true, data: {} }).data.input = value;
-							return;
-						}
-
-						const input = entry?.data?.input ?? {};
-						deep_set(input, path.map(String), value);
-						(cache[''] ??= { serialize: true, data: {} }).data.input = input;
-					},
-					() => flatten_issues(get_cache(__)?.['']?.data?.issues ?? [])
+					{
+						get_input: () => get_cache(__)?.['']?.data?.input ?? {},
+						set_input: (path, value) => {
+							const cache = get_cache(__);
+							const entry = cache[''];
+
+							if (entry?.data?.submission) {
+								// don't override a submission
+								return;
+							}
+
+							if (path.length === 0) {
+								(cache[''] ??= { serialize: true, data: {} }).data.input = value;
+								return;
+							}
+
+							const input = entry?.data?.input ?? {};
+							deep_set(input, path.map(String), value);
+							(cache[''] ??= { serialize: true, data: {} }).data.input = input;
+						},
+						get_issues: () => flatten_issues(get_cache(__)?.['']?.data?.issues ?? []),
+						get_progress: () => ({
+							uploaded: 0,
+							total: 0,
+							percent: 0 /* upload progress is always 0 on the server */
+						})
+					}
 				);
 			}
 		});

packages/kit/src/runtime/client/remote-functions/form.svelte.js

@@ -19,7 +19,9 @@ import {
 	build_path_string,
 	normalize_issue,
 	serialize_binary_form,
-	BINARY_FORM_CONTENT_TYPE
+	BINARY_FORM_CONTENT_TYPE,
+	deep_get,
+	get_file_paths
 } from '../../form-utils.js';
 
 /**
@@ -65,6 +67,11 @@ export function form(id) {
 		 */
 		let input = $state({});
 
+		/**
+		 * @type {Record<string, { uploaded: number, total: number, percent: number }>}
+		 */
+		let upload_progress = $state({});
+
 		/** @type {InternalRemoteFormIssue[]} */
 		let raw_issues = $state.raw([]);
 
@@ -172,10 +179,10 @@ export function form(id) {
 		}
 
 		/**
-		 * @param {FormData} data
+		 * @param {FormData} form_data
 		 * @returns {Promise<boolean> & { updates: (...args: any[]) => Promise<boolean> }}
 		 */
-		function submit(data) {
+		function submit(form_data) {
 			// Store a reference to the current instance and increment the usage count for the duration
 			// of the request. This ensures that the instance is not deleted in case of an optimistic update
 			// (e.g. when deleting an item in a list) that fails and wants to surface an error to the user afterwards.
@@ -203,28 +210,66 @@ export function form(id) {
 						throw updates_error;
 					}
 
-					const { blob } = serialize_binary_form(convert(data), {
+					const data = convert(form_data);
+
+					const { blob, file_offsets } = serialize_binary_form(data, {
 						remote_refreshes: Array.from(refreshes ?? [])
 					});
 
-					const response = await fetch(`${base}/${app_dir}/remote/${action_id_without_key}`, {
-						method: 'POST',
-						headers: {
-							'Content-Type': BINARY_FORM_CONTENT_TYPE,
-							// Forms cannot be called during rendering, so it's save to use location here
-							'x-sveltekit-pathname': location.pathname,
-							'x-sveltekit-search': location.search
-						},
-						body: blob
+					/** @type {string} */
+					const response_text = await new Promise((resolve, reject) => {
+						const xhr = new XMLHttpRequest();
+						xhr.addEventListener('readystatechange', () => {
+							switch (xhr.readyState) {
+								case 2 /* HEADERS_RECEIVED */:
+									if (xhr.status !== 200) {
+										// We only end up here if the server has an internal error
+										// (which shouldn't happen because we handle errors on the server and always send a 200 response)
+										reject(new Error('Failed to execute remote function'));
+									}
+									break;
+								case 4 /* DONE */:
+									if (xhr.status !== 200) {
+										reject(new Error('Failed to execute remote function'));
+										break;
+									}
+									resolve(xhr.responseText);
+									break;
+							}
+						});
+						if (file_offsets) {
+							const file_paths = get_file_paths(data);
+							for (const [file, path] of file_paths) {
+								deep_set(upload_progress, path, {
+									uploaded: 0,
+									total: file.size,
+									get percent() {
+										if (this.total === 0) return 0;
+										return this.uploaded / this.total;
+									}
+								});
+							}
+							xhr.upload.addEventListener('progress', (ev) => {
+								for (const file of file_offsets) {
+									const total = file.file.size;
+									let uploaded = ev.loaded - file.start;
+									if (uploaded <= 0) continue;
+									if (uploaded > total) uploaded = total;
+									const path = file_paths.get(file.file);
+									if (!path) continue;
+									deep_get(upload_progress, path).uploaded = uploaded;
+								}
+							});
+						}
+						// Use `action_id_without_key` here because the id is included in the body via `convert(data)`
+						xhr.open('POST', `${base}/${app_dir}/remote/${action_id_without_key}`);
+						xhr.setRequestHeader('Content-Type', BINARY_FORM_CONTENT_TYPE);
+						xhr.setRequestHeader('x-sveltekit-pathname', location.pathname);
+						xhr.setRequestHeader('x-sveltekit-search', location.search);
+						xhr.send(blob);
 					});
 
-					if (!response.ok) {
-						// We only end up here in case of a network error or if the server has an internal error
-						// (which shouldn't happen because we handle errors on the server and always send a 200 response)
-						throw new Error('Failed to execute remote function');
-					}
-
-					const form_result = /** @type { RemoteFunctionResponse} */ (await response.json());
+					const form_result = /** @type { RemoteFunctionResponse} */ (JSON.parse(response_text));
 
 					// reset issues in case it's a redirect or error (but issues passed in that case)
 					raw_issues = [];
@@ -418,6 +463,14 @@ export function form(id) {
 
 						if (file) {
 							set_nested_value(input, name, file);
+							set_nested_value(upload_progress, name, {
+								uploaded: 0,
+								total: file.size,
+								get percent() {
+									if (this.total === 0) return 0;
+									return this.uploaded / this.total;
+								}
+							});
 						} else {
 							// Remove the property by setting to undefined and clean up
 							const path_parts = name.split(/\.|\[|\]/).filter(Boolean);
@@ -449,6 +502,7 @@ export function form(id) {
 					await tick();
 
 					input = convert_formdata(new FormData(form));
+					upload_progress = {};
 				};
 
 				form.addEventListener('reset', handle_reset);
@@ -494,18 +548,22 @@ export function form(id) {
 				get: () =>
 					create_field_proxy(
 						{},
-						() => input,
-						(path, value) => {
-							if (path.length === 0) {
-								input = value;
-							} else {
-								deep_set(input, path.map(String), value);
-
-								const key = build_path_string(path);
-								touched[key] = true;
-							}
-						},
-						() => issues
+						{
+							get_input: () => input,
+							set_input: (path, value) => {
+								if (path.length === 0) {
+									input = value;
+								} else {
+									deep_set(input, path.map(String), value);
+
+									const key = build_path_string(path);
+									touched[key] = true;
+								}
+							},
+							get_issues: () => issues,
+							get_progress: (path) =>
+								deep_get(upload_progress, path) ?? { uploaded: 0, total: 0, percent: 0 }
+						}
 					)
 			},
 			result: {