src for upload file to S3 object storage

upload-large-file/src/fe/index.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Upload Video to R2</title>
+  </head>
+  <body>
+    <h1>Upload a Video File</h1>
+    <form id="uploadForm" enctype="multipart/form-data">
+      <input type="file" id="fileInput" />
+      <button type="submit">Upload</button>
+    </form>
+    <progress id="progressBar" value="0" max="100"></progress>
+
+    <script> 
+      document
+        .getElementById("uploadForm")
+        .addEventListener("submit", async (e) => {
+          e.preventDefault();
+          await uploadFile();
+        });
+
+      async function uploadFile() {
+        const fileInput = document.getElementById("fileInput");
+        const file = fileInput.files[0];
+        if (!file) {
+          alert("Please select a file.");
+          return;
+        }
+
+        const uploadId = await initiateMultipartUpload(file.name);
+
+        /**
+         * NOTE: The maximum part size is 5 GB. For simplicity, we are using 500 MB here.
+         * Refer to the S3 documentation for more information: https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html
+         */
+        const partSize = 500 * 1024 * 1024; // 500 MB per part
+        const parts = [];
+        const uploadPromises = [];
+        let uploadedSize = 0;
+
+        for (let i = 0; i < file.size; i += partSize) {
+          const partNumber = Math.floor(i / partSize) + 1;
+          const chunk = file.slice(i, i + partSize);
+
+          const uploadPromise = (async (partNumber) => {
+            const presignedUrl = await getPresignedUrl(
+              uploadId,
+              partNumber,
+              file.name
+            );
+
+            const etag = await uploadPartToS3(presignedUrl, chunk);
+
+            parts.push({
+              PartNumber: partNumber,
+              ETag: etag,
+            });
+
+            uploadedSize += chunk.size;
+            const progressBarEle = document.getElementById("progressBar");
+            progressBarEle.value = (uploadedSize / file.size) * 100;
+          })(partNumber);
+
+          uploadPromises.push(uploadPromise);
+        }
+
+        await Promise.all(uploadPromises);
+        await completeMultipartUpload(uploadId, parts, file.name);
+        alert("File uploaded successfully!");
+      }
+
+      async function initiateMultipartUpload(fileName) {
+        const response = await fetch(
+          "http://localhost:3000/initiate-multipart-upload",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ fileName }),
+          }
+        );
+        const { uploadId } = await response.json();
+        return uploadId;
+      }
+
+      async function getPresignedUrl(uploadId, partNumber, fileName) {
+        const response = await fetch(
+          "http://localhost:3000/get-presigned-url",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ uploadId, partNumber, fileName }),
+          }
+        );
+        const { url } = await response.json();
+        return url;
+      }
+
+      async function uploadPartToS3(url, chunk) {
+        const response = await fetch(url, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/octet-stream",
+          },
+          body: chunk,
+        });
+        if (!response.ok) throw new Error("Failed to upload part");
+        const etag = `${response.headers.get("ETag")}`.replace(/"/g, "");
+
+        if (!etag) {
+          throw new Error("Failed to retrieve ETag from the response.");
+        }
+
+        return etag;
+      }
+
+      async function completeMultipartUpload(uploadId, parts, fileName) {
+        await fetch("http://localhost:3000/complete-multipart-upload", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ uploadId, parts, fileName }),
+        });
+      }
+    </script>
+  </body>
+</html>