ipfs.add: How to update DOM in progress()?

[alx696]

• Version:0.35.0
• Platform:Ubuntu 18.04.02 Chrome 73.0.3683.103

Type:Question

Severity:Low

Description:

I try to display progress info for user when add file to ipfs. But DOM not updated until add work finish. Because the DOM will not be updated before JavaScript is executed.

Is there any good idea to solve this problem?

Steps to reproduce the error:

...
          ipfs.add(
              [
                {path: path, content: content}
              ],
              {
                wrapWithDirectory: true,
                progress: (length) => {
                  let percent = (length / FileSize * 100).toFixed(0);
                  console.debug('添加完成比例:', percent);

                  if (percent < 100) {
                    setTimeout(() => {
                      progressE.innerHTML = `<div class="progress-bar" style="width: ${percent}%;"></div>
                        <div class="progress-text">${file.name} 已经分享： ${percent}%</div>`;
                    }, 20);
                  }
                }
              })
...

I have try setTimeout , not work.

[alanshaw]

What size files are you adding - is it just happening very quickly?

[alx696]

@alanshaw Adding 700MB file takes more than 2s. getReadableStream takes more, the problem is DOM not updated. Am i write a wrong code? File size more than about 700MB will crash the Chrome.

Look source: https://github.com/alx696/share/blob/master/ipfs/x.js#L135 , progressE.innerHTML not refresh immediately.

Look demo: https://alx696.github.io/share/ipfs/

[alpeer]

any updates?

[whizzzkid]

js-ipfs is being deprecated in favor of Helia. You can https://github.com/ipfs/js-ipfs/issues/4336 and read the migration guide.

Please feel to reopen with any comments before 2023-06-05. We will do a final pass on reopened issues afterward (see https://github.com/ipfs/js-ipfs/issues/4336).