Js-ipfs example browser-mfs, how to display an image

1

For showing how to (serverless /without a gateway) display an image stored in ipfs (mutable file system FILES api), I found a nice example examples/browser-mfs.
In the ipfs.files.read function (index.js line:144) is see that the “read” button in the example will display the contents of a file. In case of a jpeg it should load the data in a blob (temporary file on your filesystem) and display it in a popup-window (by a generated ObjectURL).

But, when I try the example…
first upload a 500K jpg by dragging it on the page
then click on “read” (and provide the filename)
… it does not work

The console says .then is not a function, So I tried to fix this by removing the mime type lookup, and changing the function according to the specs and I got to this:

readForm(async (path, offset, length, timeout) => {
    log(`ipfs.files.read('${path}', ${JSON.stringify({
      offset,
      length
    }, null, 2)})`)

const chunks = []

console.log(path+' raw content:')

const encoder = new TextEncoder()
const decoder = new TextDecoder()

for await (const chunk of ipfs.files.read(path, {
      offset,
      length,
      timeout
    }))
{
console.info(decoder.decode(chunk))
const data = bufferToArrayBuffer(chunk)
console.info(data)
const mimeType = 'image/jpeg'
const file = new Blob([data], {
            type: mimeType
          })
          const fileURL = URL.createObjectURL(file)
          window.open(fileURL)
}

  })

And it works now! But the issue is that the image is not displayed completely (the bottom part is not drawn). This only happens with bigger jpg files (>300K)

My minimal coding skills did help me so far, but can anyone drop a hint how I should continue :hear_no_evil:

PS: “ipfs”: “^0.54.1”

2

When I look at the file trough ipfs.io/ipfs gateway the file is also not displayed correctly so I think it has something to do with the file upload part.