fix: file upload without buffering (#1534)

@types/ipfs/index.d.ts

@@ -197,7 +197,15 @@ declare module "ipfs" {
     progress?: (bytes: number) => void,
     rawLeaves?: boolean,
     trickle?: boolean,
-    wrapWithDirectory?: boolean
+    wrapWithDirectory?: boolean,
+    onUploadProgress?: (progress: LoadProgress) => void,
+    onDownloadProgress?: (progress: LoadProgress) => void
+  }
+
+  type LoadProgress = {
+    total: number,
+    loaded: number,
+    lengthComputable: boolean
   }
 
   export type UnixFSEntry = {

package.json

@@ -47,7 +47,7 @@
     "ip": "^1.1.5",
     "ipfs-css": "^1.2.0",
     "ipfs-geoip": "^4.1.0",
-    "ipfs-http-client": "^45.0.0",
+    "ipfs-http-client": "^46.0.0",
     "ipfs-provider": "^1.0.0",
     "ipld-explorer-components": "1.6.0",
     "is-binary": "^0.1.0",

src/App.js

@@ -44,7 +44,7 @@ export class App extends Component {
     const addAtPath = isFilesPage ? routeInfo.params.path : '/'
     const files = await filesPromise
 
-    doFilesWrite(await normalizeFiles(files), addAtPath)
+    doFilesWrite(normalizeFiles(files), addAtPath)
     // Change to the files pages if the user is not there
     if (!isFilesPage) {
       doUpdateHash('/files')

src/bundles/files/actions.js

@@ -283,7 +283,11 @@ export default () => ({
      */
     async (ipfs, files, root, id, { dispatch }) => {
       files = files.filter(f => !IGNORED_FILES.includes(basename(f.path)))
-      const totalSize = files.reduce((prev, { size }) => prev + size, 0)
+      const uploadSize = files.reduce((prev, { size }) => prev + size, 0)
+      // Just estimate download size to be around 10% of upload size.
+      const downloadSize = uploadSize * 10 / 100
+      const totalSize = uploadSize + downloadSize
+      let loaded = 0
 
       // Normalise all paths to be relative. Dropped files come as absolute,
       // those added by the file input come as relative paths, so normalise them.
@@ -296,27 +300,29 @@ export default () => ({
       const paths = files.map(f => ({ path: f.path, size: f.size }))
 
       /**
-       * @param {number} sent
+       * @param {Object} update
+       * @param {number} update.loaded
+       * @param {number} update.total
        */
-      const updateProgress = (sent) => {
+      const updateProgress = (update) => {
+        loaded += update.loaded
         dispatch({
           type: 'FILES_WRITE_UPDATED',
           payload: {
             id,
             paths,
-            progress: sent / totalSize * 100
+            progress: loaded / totalSize * 100
           }
         })
       }
 
-      updateProgress(0)
-
       let res = null
       try {
         res = await all(ipfs.addAll(files, {
           pin: false,
           wrapWithDirectory: false,
-          progress: updateProgress
+          onUploadProgress: updateProgress,
+          onDownloadProgress: updateProgress
         }))
       } catch (error) {
         console.error(error)
@@ -346,7 +352,7 @@ export default () => ({
         }
       }
 
-      updateProgress(totalSize)
+      updateProgress({ total: totalSize, loaded: totalSize })
     }
   ),
 

src/files/file-input/FileInput.js

@@ -51,7 +51,7 @@ class FileInput extends React.Component {
   }
 
   onInputChange = (input) => async () => {
-    this.props.onAddFiles(await normalizeFiles(input.files))
+    this.props.onAddFiles(normalizeFiles(input.files))
     input.value = null
   }
 

src/files/file/File.js

@@ -165,7 +165,7 @@ const dropTarget = {
     if (item.hasOwnProperty('files')) {
       (async () => {
         const files = await item.filesPromise
-        props.onAddFiles(await normalizeFiles(files), props.path)
+        props.onAddFiles(normalizeFiles(files), props.path)
       })()
     } else {
       const src = item.path

src/files/files-list/FilesList.js

@@ -444,7 +444,7 @@ const dropTarget = {
 
     const add = async () => {
       const files = await filesPromise
-      onAddFiles(await normalizeFiles(files))
+      onAddFiles(normalizeFiles(files))
     }
 
     add()