Files larger than 250kb cannot be added by MFS API on browser node.

[ocknamo]

• Version: 0.54.2

• Platform: Browser (Chrome and Brave)

Type: Bug

Severity: High

Description:

• What you did

I implemented browser application using ipfs-core in Angular. It is very simple application. Its functionalities are add file by MFS and get from its node and download file.

• What happened

I cannot add complete file when its size is over 250kB.

↓Origin file.

↓Added file.

First, I thought that my implementation was just wrong in Angular. So I modified example of browser-webpack and added functionality of "add" and download.

As a result, I was able to reproduce the problem.

Next, I check on Node.js too. But I was not able to reproduce the problem.On Node.js, I can use the MFS API or the regular API to add the complete file.

Points are these.

- This bug was reproduce when using MFS API (ipfs.files.write) not regular API (ipfs.add).
- Only on browser.

• What you expected to happen

I think only one block can be added to IPFS node on browser when using MFS API. But I don't know why.

Steps to reproduce the error:

Modify example of browser-webpack in this repository.

Modified file is "app.js" only.
code is below.

// app.js

...

const fileContentToDataUri = require('./utils/convert')

let node = null;

class App extends React.Component {

...

  async ops () {
    node = await IPFS.create({ repo: String(Math.random() + Date.now()) })
		...
  }

  async handleChangeFile(e) {
    const target = e.target;
    const file = target.files.item(0);
    console.log('LOG :>> ', file.name);


    // Regular API can add completely file.
    // const { cid } = await node.add(file);

    // MFS API
    const path = `/${file.name}`;
    await node.files.write(path, file, { create: true });
    const { cid } = await node.files.stat(path);

    console.log('cid :>> ', String(cid));
    this.setState({ addedFileHash: cid.toString() });

    // Get file from IPFS
    const files = await node.get(cid, { timeout: 10000 });
    // Create dataUri
    let dataUri = ''
    for await (const file of files) {
      dataUri = await fileContentToDataUri(file.content);
    }

    // Downloag file
    const a = document.createElement('a');
    document.body.appendChild(a);
    a.setAttribute('style', 'display: none');
    a.href = dataUri;
    a.download = 'test.jpg';
    a.click();
  }

  render () {
    return (
      <div style={{ textAlign: 'center' }}>
				...
        <input id="file" type="file" onChange={(e) => this.handleChangeFile(e)}/>
      </div>
    )
  }
}
module.exports = App

And, running the example.

npm install
npm start

Open localhost:3000/ on browser.

Upload File and download.

Lacked cat image is downloaded.

Thanks for any help!

[welcome]

Thank you for submitting your first issue to this repository! A maintainer will be here shortly to triage and review.
In the meantime, please double-check that you have provided all the necessary information to make this process easy! Any information that can help save additional round trips is useful! We currently aim to give initial feedback within two business days. If this does not happen, feel free to leave a comment.
Please keep an eye on how this issue will be labeled, as labels give an overview of priorities, assignments and additional actions requested by the maintainers:

• "Priority" labels will show how urgent this is for the team.
• "Status" labels will show if this is ready to be worked on, blocked, or in progress.
• "Need" labels will indicate if additional input or analysis is required.

Finally, remember to use https://discuss.ipfs.io if you just need general support.

[ocknamo]

I uploaded the code.

https://github.com/ocknamo/bug-reproductions-jsipfs-issue-3576/tree/master/examples/browser-webpack