Merge pull request #203 from oceanprotocol/fix/ipfs

IPFS fixes

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, readFileAsync } from '../../../../utils/utils'
+import { formatBytes, pingUrl, streamFiles } from '../../../../utils/utils'
 import { ipfsGatewayUri, ipfsNodeUri } from '../../../../config'
 import Form from './Form'
 
@@ -20,7 +20,7 @@ export default function Ipfs({ addFile }: { addFile(url: string): void }) {
     const [loading, setLoading] = useState(false)
     const [message, setMessage] = useState('')
     const [fileSize, setFileSize] = useState('')
-    const [fileSizeReceived, setFileSizeReceived] = useState('')
+    const [fileSizeReceived] = useState('')
     const [error, setError] = useState('')
 
     useEffect(() => {
@@ -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, {
-                wrapWithDirectory: true,
-                progress: (length: number) =>
-                    setFileSizeReceived(formatBytes(length, 0))
-            })
-
-            // CID of wrapping directory is returned last
-            const cid = response[response.length - 1].hash
+            const cid = await streamFiles(ipfs, data)
             console.log(`File added: ${cid}`)
             return cid
         } catch (error) {
@@ -54,17 +47,13 @@ export default function Ipfs({ addFile }: { addFile(url: string): void }) {
         setLoading(true)
         setError('')
 
-        const { path, size } = acceptedFiles[0]
+        const file = acceptedFiles[0]
+        const { path, size } = file
         const totalSize = formatBytes(size, 0)
         setFileSize(totalSize)
 
         // Add file to IPFS node
-        const content: any = await readFileAsync(acceptedFiles[0])
-        const data = Buffer.from(content)
-        const fileDetails = {
-            path,
-            content: data
-        }
+        const fileDetails = { path, content: file }
 
         const cid = await addToIpfs(fileDetails)
         if (!cid) return

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

@@ -1,4 +1,10 @@
-import React, { FormEvent, PureComponent, ChangeEvent } from 'react'
+import React, {
+    lazy,
+    Suspense,
+    FormEvent,
+    PureComponent,
+    ChangeEvent
+} from 'react'
 import axios from 'axios'
 import { Logger, File } from '@oceanprotocol/squid'
 import shortid from 'shortid'
@@ -6,11 +12,13 @@ import Button from '../../../components/atoms/Button'
 import Help from '../../../components/atoms/Form/Help'
 import ItemForm from './ItemForm'
 import Item from './Item'
-import Ipfs from './Ipfs'
 import styles from './index.module.scss'
 
 import { serviceUri } from '../../../config'
 import cleanupContentType from '../../../utils/cleanupContentType'
+import Spinner from '../../../components/atoms/Spinner'
+
+const Ipfs = lazy(() => import('./Ipfs'))
 
 export interface FilePublish extends File {
     found: boolean // non-standard
@@ -202,7 +210,11 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
                         />
                     )}
 
-                    {isIpfsFormShown && <Ipfs addFile={this.addFile} />}
+                    {isIpfsFormShown && (
+                        <Suspense fallback={<Spinner message="Loading..." />}>
+                            <Ipfs addFile={this.addFile} />
+                        </Suspense>
+                    )}
                 </div>
             </>
         )

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
 }