fix: emit compatible progress events

Author: Gozala

packages/ipfs-http-client/package.json

@@ -55,8 +55,8 @@
     "cids": "^1.0.0",
     "debug": "^4.1.1",
     "form-data": "^3.0.0",
+    "ipfs-core-utils": "^0.5.1",
     "ipfs-utils": "git://github.com/ipfs/js-ipfs-utils#xhr-2",
-    "ipfs-utils": "^4.0.0",
     "ipld-block": "^0.11.0",
     "ipld-dag-cbor": "^0.17.0",
     "ipld-dag-pb": "^0.20.0",

packages/ipfs-http-client/src/add-all.js

@@ -16,7 +16,7 @@ module.exports = configure((api) => {
     // allow aborting requests on body errors
     const controller = new AbortController()
     const signal = anySignal([controller.signal, options.signal])
-    const { headers, body, total, lengthComputable } =
+    const { headers, body, total, parts } =
       await multipartRequest(source, controller, options.headers)
 
     // In browser response body only starts streaming once upload is
@@ -25,7 +25,7 @@ module.exports = configure((api) => {
     // `{ total, loaded}` passed to `onUploadProgress` and `multipart.total`
     // in which case we disable progress updates to be written out.
     const [progressFn, onUploadProgress] = typeof options.progress === 'function'
-      ? createProgressHandler(lengthComputable, total, options.progress)
+      ? createProgressHandler(total, parts, options.progress)
       : [null, null]
 
     const res = await api.post('add', {
@@ -58,27 +58,42 @@ module.exports = configure((api) => {
  * Returns simple progress callback when content length isn't computable or a
  * progress event handler that inerpolates progress from upload progress events.
  *
- * @param {boolean} lengthComputable
  * @param {number} total
- * @param {(n:number) => void} progress
+ * @param {{name:string, start:number, end:number}[]|null} parts
+ * @param {(n:number, name:string) => void} progress
  */
-const createProgressHandler = (lengthComputable, total, progress) =>
-  lengthComputable ? [null, createOnUploadPrgress(total, progress)] : [progress, null]
+const createProgressHandler = (total, parts, progress) =>
+  parts ? [null, createOnUploadPrgress(total, parts, progress)] : [progress, null]
 
 /**
  * Creates a progress handler that interpolates progress from upload progress
  * events and total size of the content that is added.
  *
  * @param {number} size - actual content size
- * @param {(n:number) => void} progress
- * @returns {(event:{total:number, loaded: number}) => progress}
- */
-const createOnUploadPrgress = (size, progress) => ({ loaded, total }) =>
-  progress(Math.floor(loaded / total * size))
-
-/**
- * @typedef {import('../../ipfs/src/core/components/add-all').UnixFSEntry} UnixFSEntry
+ * @param {{name:string, start:number, end:number}[]} parts
+ * @param {(n:number, name:string) => void} progress
+ * @returns {(event:{total:number, loaded: number}) => void}
  */
+const createOnUploadPrgress = (size, parts, progress) => {
+  let index = 0
+  return ({ loaded, total }) => {
+    // Derive position from the current progress.
+    const position = Math.floor(loaded / total * size)
+    while (true) {
+      const { start, end, name } = parts[index]
+      // If within current part range reporst progress and break the loop
+      if (position < end) {
+        progress(position - start, name)
+        break
+      // If passed current part range report final byte for the chunk and
+      // move to next one.
+      } else {
+        progress(end - start, name)
+        index += 1
+      }
+    }
+  }
+}
 
 /**
  * @param {any} input
@@ -108,7 +123,4 @@ function toCoreInterface ({ name, hash, size, mode, mtime, mtimeNsecs }) {
 
 /**
  * @typedef {import('ipfs-core/src/components/add-all/index').UnixFSEntry} UnixFSEntry
- * @typedef {import('./index').HttpOptions} HttpOptions
- * @typedef {Object} HttpAddOptions
- * @property {}
  */

packages/ipfs-http-client/src/lib/multipart-request.browser.js

@@ -8,6 +8,7 @@ const mtimeToObject = require('./mtime-to-object')
 const { File, FormData } = require('ipfs-utils/src/globalthis')
 
 async function multipartRequest (source = '', abortController, headers = {}) {
+  const parts = []
   const formData = new FormData()
   let index = 0
   let total = 0
@@ -27,10 +28,9 @@ async function multipartRequest (source = '', abortController, headers = {}) {
       qs.push(`mode=${modeToString(mode)}`)
     }
 
-    if (mtime != null) {
-      const {
-        secs, nsecs
-      } = mtimeToObject(mtime)
+    const time = mtimeToObject(mtime)
+    if (time != null) {
+      const { secs, nsecs } = time
 
       qs.push(`mtime=${secs}`)
 
@@ -45,17 +45,20 @@ async function multipartRequest (source = '', abortController, headers = {}) {
 
     if (content) {
       formData.set(fieldName, content, encodeURIComponent(path))
-      total += content.size
+      const end = total + content.size
+      parts.push({ name: path, start: total, end })
+      total = end
     } else {
       formData.set(fieldName, new File([''], encodeURIComponent(path), { type: 'application/x-directory' }))
+      parts.push({ name: path, start: total, end: total })
     }
 
     index++
   }
 
   return {
-    lengthComputable: true,
     total,
+    parts,
     headers,
     body: formData
   }

packages/ipfs-http-client/src/lib/multipart-request.node.js

@@ -7,6 +7,13 @@ const mtimeToObject = require('./mtime-to-object')
 const merge = require('merge-options').bind({ ignoreUndefined: true })
 const toStream = require('it-to-stream')
 
+/**
+ *
+ * @param {Object} source
+ * @param {AbortController} abortController
+ * @param {Headers|Record<string, string>} [headers]
+ * @param {string} [boundary]
+ */
 async function multipartRequest (source = '', abortController, headers = {}, boundary = `-----------------------------${nanoid()}`) {
   async function * streamFiles (source) {
     try {
@@ -29,10 +36,9 @@ async function multipartRequest (source = '', abortController, headers = {}, bou
           qs.push(`mode=${modeToString(mode)}`)
         }
 
-        if (mtime != null) {
-          const {
-            secs, nsecs
-          } = mtimeToObject(mtime)
+        const time = mtimeToObject(mtime)
+        if (time != null) {
+          const { secs, nsecs } = time
 
           qs.push(`mtime=${secs}`)
 
@@ -58,14 +64,15 @@ async function multipartRequest (source = '', abortController, headers = {}, bou
       }
     } catch (err) {
       // workaround for https://github.com/node-fetch/node-fetch/issues/753
+      // @ts-ignore - abort does not expect an arguments
       abortController.abort(err)
     } finally {
       yield `\r\n--${boundary}--\r\n`
     }
   }
 
   return {
-    lengthComputable: false,
+    parts: null,
     total: -1,
     headers: merge(headers, {
       'Content-Type': `multipart/form-data; boundary=${boundary}`