S3 multipart upload for large videos, EISDIR fix

This commit is contained in:
CallMeVerity
2026-06-03 03:30:54 +01:00
parent d6cd848257
commit 1693b3849b
4 changed files with 217 additions and 43 deletions
+53 -28
View File
@@ -252,42 +252,67 @@ export default function UploadForm() {
mtvFile,
videoFile.name,
videoFile.type || "video/webm",
videoFile.size.toString(),
runDate,
);
const { parts, uploadId } = initRes.presignedUrls;
const totalSize = videoFile.size;
const CHUNK_SIZE = 80 * 1024 * 1024;
const uploadedParts: { partNumber: number; eTag: string }[] = [];
await new Promise<void>((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", (e) => {
if (e.lengthComputable) {
setProgress(
5 + Math.round((e.loaded / totalSize) * 90),
);
}
for (let i = 0; i < parts.length; i++) {
const part = parts[i]!;
const start = i * CHUNK_SIZE;
const end = Math.min(start + CHUNK_SIZE, totalSize);
const chunk = videoFile.slice(start, end);
const eTag = await new Promise<string>((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", (e) => {
if (e.lengthComputable) {
const chunkProgress = e.loaded / e.total;
const overallUploaded = start + e.loaded;
setProgress(
5 +
Math.round(
(overallUploaded / totalSize) * 90,
),
);
}
});
xhr.addEventListener("load", () => {
if (xhr.status >= 200 && xhr.status < 300) {
const etag = xhr.getResponseHeader("ETag");
if (etag) resolve(etag);
else
reject(
new Error("No ETag returned from upload"),
);
} else {
reject(
new Error(
`Upload failed with status ${xhr.status}`,
),
);
}
});
xhr.addEventListener("error", () =>
reject(new Error("Upload failed")),
);
xhr.open("PUT", part.url);
xhr.setRequestHeader(
"Content-Type",
videoFile.type || "video/webm",
);
xhr.send(chunk);
});
xhr.addEventListener("load", () => {
if (xhr.status >= 200 && xhr.status < 300) resolve();
else
reject(
new Error(
`Upload failed with status ${xhr.status}`,
),
);
});
xhr.addEventListener("error", () =>
reject(new Error("Upload failed")),
);
xhr.open("PUT", initRes.presignedUrls.video);
xhr.setRequestHeader(
"Content-Type",
videoFile.type || "video/webm",
);
xhr.send(videoFile);
});
uploadedParts.push({ partNumber: part.partNumber, eTag });
}
setProgress(98);
await uploadVideoComplete(initRes.id);
await uploadVideoComplete(initRes.id, uploadedParts, uploadId);
setProgress(100);
setSuccess(true);