Allow restarting an interrupted upload

src/client/admin/EmitterInfo.svelte

@@ -103,13 +103,14 @@
 					{@const keyInFiles = `${emitter.emitterShortId}/${file.name}`}
 					{@const valueInFiles = files?.[keyInFiles]}
 					<div class="flex">
-						{@html iconFile}<span>{file.name} ({formatSize(file.size, $_)})</span><button class="flex" on:click={() => socketApi("uploadFile", { emitterId, fileName: file.name })}
-							>{@html iconUpload}</button
+						{@html iconFile}<span>{file.name} (<span title={$_("byte", { values: { size: file.size } })}>{formatSize(file.size, $_)}</span>)</span><button
+							class="flex"
+							on:click={() => socketApi("uploadFile", { emitterId, fileName: file.name, startByte: valueInFiles != null && valueInFiles < file.size ? valueInFiles : 0 })}>{@html iconUpload}</button
 						><button class="flex" on:click={() => socketApi("removeFile", { emitterId, fileName: file.name })}>{@html iconDelete}</button>
 						{#if valueInFiles === file.size}
 							{@html iconFileCheck}
 						{:else if valueInFiles != null}
-							<progress value={valueInFiles} max={file.size}>{formatSize(valueInFiles, $_)}</progress>
+							<span title={$_("byte", { values: { size: valueInFiles } })}>{formatSize(valueInFiles, $_)}</span><progress value={valueInFiles} max={file.size}></progress>
 						{/if}
 					</div>
 				{/each}

src/client/model.ts

@@ -296,7 +296,7 @@ export const createModel = () => {
 			await removeFileByName(arg.fileName);
 		},
 		async uploadFile(arg) {
-			await uploadFile(arg.fileName, arg.uploadURL);
+			await uploadFile(arg.fileName, arg.uploadURL, arg.startByte);
 		},
 		async changeStreamConfig(arg) {
 			emitterStreamConfig$.set(arg.streamConfig);

src/client/storage/browserStorage.ts

@@ -77,13 +77,13 @@ export const removeFileByName = async (name: string) => {
 	refreshStorageFiles();
 };
 
-export const uploadFile = async (name: string, url: string) => {
+export const uploadFile = async (name: string, url: string, startByte: number) => {
 	const directory = await navigator.storage.getDirectory();
 	const fileHandle = await directory.getFileHandle(name);
 	const body = await fileHandle.getFile();
 	const res = await fetch(url, {
 		method: "PUT",
-		body,
+		body: body.slice(startByte),
 	});
 	console.log(res);
 };

src/common/rpcInterface.ts

@@ -112,14 +112,14 @@ export interface RpcClientInterface {
 	createAnswerRTCConnection(arg: { offer: RTCSessionDescriptionInit }): RTCSessionDescriptionInit;
 	completeOfferRTCConnection(arg: { answer: RTCSessionDescriptionInit }): void;
 	iceCandidate(arg: { candidate: RTCIceCandidateInit | null }): void;
-	uploadFile(arg: { fileName: string; uploadURL: string }): void;
+	uploadFile(arg: { fileName: string; uploadURL: string; startByte: number }): void;
 	removeFile(arg: { fileName: string }): void;
 	changeStreamConfig?(arg: { streamConfig: MediaStreamConstraints | undefined }): void;
 }
 
 export interface RpcServerInterface {
 	iceCandidate?(arg: { candidate: RTCIceCandidateInit | null }): void;
-	uploadFile?(arg: { emitterId: string; fileName: string }): void;
+	uploadFile?(arg: { emitterId: string; fileName: string; startByte: number }): void;
 	removeFile?(arg: { emitterId: string; fileName: string }): void;
 	toggleRecording?(arg: { emitterId: string; action: "stop" | "start" | "newFile"; receiver?: boolean; emitter?: boolean }): void;
 	transformImage?(arg: { emitterId: string; transformImage: TransformImage | undefined }): void;

src/server/clientConnection.ts

@@ -314,10 +314,12 @@ export const createClientsManager = (
 						const uploadURL = uploadManager.createUploadURL({
 							emitterShortId: emitter.shortId,
 							fileName: arg.fileName,
+							startByte: arg.startByte,
 						});
 						await emitter.api?.("uploadFile", {
 							fileName: arg.fileName,
 							uploadURL,
+							startByte: arg.startByte,
 						});
 					}
 				},

src/server/uploadManager.ts

@@ -11,6 +11,7 @@ import equal from "fast-deep-equal";
 export interface FileInfo {
 	emitterShortId: string;
 	fileName: string;
+	startByte: number;
 }
 
 export const createUploadManager = (config: Pick<ServerConfig, "recordPrefix" | "recordingsFolder">, configFilePath: string) => {
@@ -30,10 +31,10 @@ export const createUploadManager = (config: Pick<ServerConfig, "recordPrefix" |
 		try {
 			const fullFileName = join(recordingsFolder, fileInfo.emitterShortId, fileInfo.fileName);
 			await mkdir(dirname(fullFileName), { recursive: true });
-			const stream = createWriteStream(fullFileName);
+			const stream = createWriteStream(fullFileName, { start: fileInfo.startByte, flags: fileInfo.startByte === 0 ? "w" : "r+" });
 			const update = () =>
 				receivedFiles$.update((receivedFiles) => {
-					receivedFiles[`${fileInfo.emitterShortId}/${fileInfo.fileName}`] = stream.bytesWritten;
+					receivedFiles[`${fileInfo.emitterShortId}/${fileInfo.fileName}`] = fileInfo.startByte + stream.bytesWritten;
 					return receivedFiles;
 				});
 			update();