From 2411714bceb12d9842ffa7c1639f42399ff68c8a Mon Sep 17 00:00:00 2001
From: Regalijan <r@regalijan.com>
Date: Mon, 25 Mar 2024 23:00:30 -0400
Subject: [PATCH] Move file uploads to xhr as r2 does not support http2

---
 app/routes/report.tsx | 69 +++++++++++++++----------------------------
 1 file changed, 24 insertions(+), 45 deletions(-)

diff --git a/app/routes/report.tsx b/app/routes/report.tsx
index 12a5896..8804f59 100644
--- a/app/routes/report.tsx
+++ b/app/routes/report.tsx
@@ -185,53 +185,32 @@ export default function () {
 
     setUploading(true);
 
-    for (let i = 0; i < upload_urls.length; i++) {
-      const reader = files[i].stream().getReader();
-
-      try {
-        const uploadReq = await fetch(upload_urls[i], {
-          body: supportsRequestStreams
-            ? new ReadableStream({
-                async pull(controller) {
-                  const chunk = await reader.read();
-
-                  if (chunk.done) {
-                    controller.close();
-
-                    if (i === upload_urls.length - 1) setUploading(false);
-
-                    return;
-                  }
-
-                  controller.enqueue(chunk.value);
-                  bytesRead += chunk.value.length;
-                  setFileProgress(Math.floor((bytesRead / totalSize) * 100));
-                },
-              })
-            : files[i],
-          // @ts-expect-error
-          duplex: supportsRequestStreams ? "half" : undefined,
-          headers: {
-            "content-type":
-              (files[i].name.split(".").at(-1) as string).toLowerCase() ===
-              "mov"
-                ? "video/mp4"
-                : files[i].type ||
-                  fileTypes[files[i].name.split(".").at(-1) as string],
-          },
-          method: "PUT",
-        });
-
-        if (!uploadReq.ok) {
-          shouldRecall = true;
-          break;
-        }
-      } catch (e) {
-        console.error(e);
+    const increaseProgress = (e: ProgressEvent) => {
+      bytesRead += e.loaded;
+      setFileProgress(Math.floor((bytesRead / totalSize) * 100));
+    };
 
+    for (let i = 0; i < upload_urls.length; i++) {
+      const xhr = new XMLHttpRequest();
+
+      xhr.open("PUT", upload_urls[i], false);
+      xhr.setRequestHeader(
+        "content-type",
+        (files[i].name.split(".").at(-1) as string).toLowerCase() === "mov"
+          ? "video/mp4"
+          : files[i].type ||
+              fileTypes[files[i].name.split(".").at(-1) as string],
+      );
+
+      xhr.upload.addEventListener("progress", increaseProgress);
+      xhr.upload.onabort = () => {
         shouldRecall = true;
-        break;
-      }
+      };
+      xhr.upload.onerror = () => {
+        shouldRecall = true;
+      };
+
+      xhr.send(files[i]);
     }
 
     if (shouldRecall) {