progress bar

Author: aakash-taneja

src/Lighthouse/upload/files/browser.ts

@@ -13,7 +13,7 @@ export default async <T extends boolean>(
   accessToken: string,
   multi: boolean,
   dealParameters: DealParameters | undefined,
-  uploadProgressCallback: (data: IUploadProgressCallback) => void
+  uploadProgressCallback?: (data: IUploadProgressCallback) => void
 ): Promise<{ data: UploadFileReturnType<T> }> => {
   try {
     const endpoint =
@@ -35,35 +35,32 @@ export default async <T extends boolean>(
         : 'null',
     })
 
-    const response = await retryFetch(endpoint, {
-      method: 'POST',
-      body: formData,
-      headers: headers,
-      timeout: 7200000,
-    })
+    const response = uploadProgressCallback
+      ? await retryFetch(endpoint, {
+          method: 'POST',
+          body: formData,
+          headers: headers,
+          timeout: 7200000,
+          onProgress: (progress) => {
+            uploadProgressCallback({
+              progress: progress,
+              total: 100, // We don't have the total size here, so we're using 100 as a percentage
+              uploaded: progress * 100,
+            })
+          },
+        })
+      : await retryFetch(endpoint, {
+          method: 'POST',
+          body: formData,
+          headers: headers,
+          timeout: 7200000,
+        })
 
     if (!response.ok) {
       throw new Error(`Request failed with status code ${response.status}`)
     }
 
-    const reader = response.body?.getReader()
-    const decoder = new TextDecoder()
-    let responseText = ''
-
-    if (reader) {
-      let totalBytes = 0
-      while (true) {
-        const { done, value } = await reader.read()
-        if (done) break
-        totalBytes += value?.length || 0
-        responseText += decoder.decode(value, { stream: true })
-        uploadProgressCallback({
-          progress: 1, // We can't accurately calculate progress without knowing the total size
-          total: totalBytes,
-          uploaded: totalBytes,
-        })
-      }
-    }
+    const responseText = await response.text()
 
     let data
     if (typeof responseText === 'string') {

src/Lighthouse/upload/files/index.ts

@@ -41,10 +41,7 @@ async function uploadFiles(
         apiKey,
         true,
         dealParameters,
-        uploadProgressCallback ||
-          (() => {
-            return
-          })
+        uploadProgressCallback
       )
     }
   } else {
@@ -57,10 +54,7 @@ async function uploadFiles(
         apiKey,
         false,
         dealParameters,
-        uploadProgressCallback ||
-          (() => {
-            return
-          })
+        uploadProgressCallback
       )
     }
   }

src/Lighthouse/utils/util.ts

@@ -2,6 +2,7 @@ import { ethers } from 'ethers'
 
 interface FetchOptions extends RequestInit {
   timeout?: number
+  onProgress?: (progress: number) => void
 }
 
 const isCID = (cid: string) => {
@@ -41,17 +42,85 @@ async function fetchWithTimeout(
   resource: string,
   options: FetchOptions
 ): Promise<Response> {
-  const { timeout = 8000, ...rest } = options
+  const { timeout = 8000, onProgress, ...rest } = options
 
   const controller = new AbortController()
   const id = setTimeout(() => controller.abort(), timeout)
+
   try {
-    const response = await fetch(resource, {
-      ...rest,
-      signal: controller.signal,
-    })
-    clearTimeout(id)
-    return response
+    if (onProgress && rest.body instanceof FormData) {
+      return new Promise<Response>((resolve, reject) => {
+        const xhr = new XMLHttpRequest()
+        xhr.open(rest.method || 'GET', resource)
+
+        if (rest.headers) {
+          if (rest.headers instanceof Headers) {
+            rest.headers.forEach((value, key) => {
+              xhr.setRequestHeader(key, value)
+            })
+          } else if (typeof rest.headers === 'object') {
+            for (const [key, value] of Object.entries(rest.headers)) {
+              xhr.setRequestHeader(key, value as string)
+            }
+          }
+        }
+
+        xhr.timeout = timeout
+        xhr.onload = () => {
+          const headers = new Headers()
+          xhr
+            .getAllResponseHeaders()
+            .trim()
+            .split(/[\r\n]+/)
+            .forEach((line) => {
+              const parts = line.split(': ')
+              const header = parts.shift()
+              const value = parts.join(': ')
+              if (header) headers.set(header, value)
+            })
+
+          resolve(
+            new Response(xhr.response, {
+              status: xhr.status,
+              statusText: xhr.statusText,
+              headers: headers,
+            })
+          )
+        }
+        xhr.onerror = () => reject(new Error('Network error'))
+        xhr.ontimeout = () => reject(new Error('Request timed out'))
+        xhr.upload.onprogress = (event: ProgressEvent) => {
+          if (event.lengthComputable) {
+            onProgress(event.loaded / event.total)
+          }
+        }
+
+        // Handle different body types
+        if (rest.body instanceof FormData) {
+          xhr.send(rest.body)
+        } else if (rest.body instanceof ReadableStream) {
+          // Convert ReadableStream to Blob and then send
+          new Response(rest.body).blob().then((blob) => xhr.send(blob))
+        } else if (
+          typeof rest.body === 'string' ||
+          rest.body instanceof Blob ||
+          rest.body instanceof ArrayBuffer
+        ) {
+          xhr.send(rest.body)
+        } else if (rest.body == null) {
+          xhr.send()
+        } else {
+          reject(new Error('Unsupported body type'))
+        }
+      })
+    } else {
+      const response = await fetch(resource, {
+        ...rest,
+        signal: controller.signal,
+      })
+      clearTimeout(id)
+      return response
+    }
   } catch (error) {
     clearTimeout(id)
     throw error

tsconfig.json

@@ -2,13 +2,11 @@
   "compilerOptions": {
     "outDir": "dist",
     "target": "es2022",
-    "lib": [
-      "es2019"
-    ],
+    "lib": ["es2019", "es6", "dom"],
     "module": "commonjs",
     "sourceMap": false,
     "strict": true,
-    "esModuleInterop": true,  
+    "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "experimentalDecorators": true,
@@ -19,5 +17,11 @@
     "resolveJsonModule": true
   },
   "include": ["src"],
-  "exclude": ["node_modules", "**/*.spec.ts","**/*.test.ts",".vscode",".d.ts"]
+  "exclude": [
+    "node_modules",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    ".vscode",
+    ".d.ts"
+  ]
 }