stream files when adding

client/src/routes/Publish/Files/Ipfs/index.tsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react'
 import useIpfsApi, { IpfsConfig } from '../../../../hooks/use-ipfs-api'
 import Spinner from '../../../../components/atoms/Spinner'
 import Dropzone from '../../../../components/molecules/Dropzone'
-import { formatBytes, pingUrl } from '../../../../utils/utils'
+import { formatBytes, pingUrl, streamFiles } from '../../../../utils/utils'
 import { ipfsGatewayUri, ipfsNodeUri } from '../../../../config'
 import Form from './Form'
 
@@ -32,14 +32,7 @@ export default function Ipfs({ addFile }: { addFile(url: string): void }) {
 
     async function addToIpfs(data: any) {
         try {
-            const response = await ipfs.add(data, {
+            const cid = await streamFiles(ipfs, data)
-                wrapWithDirectory: true
-                // progress: (length: number) =>
-                //     setFileSizeReceived(formatBytes(length, 0))
-            })
-
-            // CID of wrapping directory is returned last
-            const cid = response[response.length - 1].hash
             console.log(`File added: ${cid}`)
             return cid
         } catch (error) {
@@ -60,10 +53,7 @@ export default function Ipfs({ addFile }: { addFile(url: string): void }) {
         setFileSize(totalSize)
 
         // Add file to IPFS node
-        const fileDetails = {
+        const fileDetails = { path, content: file }
-            path,
-            content: file
-        }
 
         const cid = await addToIpfs(fileDetails)
         if (!cid) return

client/src/utils/utils.ts

@@ -1,5 +1,5 @@
-/* eslint-disable no-console */
 import axios from 'axios'
+import { Logger } from '@oceanprotocol/squid'
 
 export function formatBytes(a: number, b: number) {
     if (a === 0) return '0 Bytes'
@@ -15,15 +15,35 @@ export function arraySum(array: number[]) {
     return array.reduce((a, b) => a + b, 0)
 }
 
+export function streamFiles(ipfs: any, files: any) {
+    return new Promise((resolve, reject) => {
+        const stream = ipfs.addReadableStream({
+            wrapWithDirectory: true
+            // progress: (length: number) =>
+            //     setFileSizeReceived(formatBytes(length, 0))
+        })
+
+        stream.on('data', (data: any) => {
+            Logger.log(`Added ${data.path} hash: ${data.hash}`)
+            // The last data event will contain the directory hash
+            if (data.path === '') resolve(data.hash)
+        })
+
+        stream.on('error', reject)
+        stream.write(files)
+        stream.end()
+    })
+}
+
 export async function pingUrl(url: string) {
     try {
         const response = await axios(url)
-        if (response.status !== 200) console.error(`Not found: ${url}`)
+        if (response.status !== 200) Logger.error(`Not found: ${url}`)
 
-        console.log(`File found: ${url}`)
+        Logger.log(`File found: ${url}`)
         return true
     } catch (error) {
-        console.error(error.message)
+        Logger.error(error.message)
     }
     return false
 }