Live upload progress not showing

[MonarthS]

When I Upload any file, it is not showing live uploaded status using progress;

The progress showed after whole file or folder is uploaded.

CODE:

var ipfsClient = require('ipfs-http-client')
const fs = require('fs');

demoCall = function(data){
    console.log('uploaded : ' + data);
}

ipfs.addFromFs('./soft', { recursive: true, progress: demoCall}, (err, result) => {
    if (err) { throw err }
    console.log(result);
})

OUTPUT:

[achingbrain]

The code behind this module has changed significantly in the last release - are you still seeing this problem?

[christopheSeeka]

Here im still having this issue at the moment, here my test code:

import { sha256 } from "js-sha256";
import ipfsClient from "ipfs-http-client";
import "regenerator-runtime/runtime";
import multihashes from "multihashes";

var buffer = require("buffer");
let ipfs

let progress_func = function(len) {
  console.log("File progress:", len);
};
const addDile = async function(buffer) {
  for await (const result of ipfs.add(buffer, {progress: progress_func, pin: true})) {
    console.log(result);
    console.log("https://ipfs.infura.io/ipfs/" + result.path);
  }
}
function upload() {
  let host = document.getElementById("host").value
  ipfs = ipfsClient({
    host: host,
    port: "5001",
    protocol: "https"
  });
  const reader = new FileReader();
  reader.onloadend = function() {
    const buf = buffer.Buffer(reader.result); // Convert data into buffer
    const files = [
      {
        content: buf
      }
    ];
    console.log(sha256(buf));
    addDile(files);
  };
  const photo = document.getElementById("photo");
  reader.readAsArrayBuffer(photo.files[0]); // Read Provided File
}

document.getElementById("uploadImage").addEventListener("click", upload);

I get all the progress logs only at the end.

[christopheSeeka]

Made a simple online test here:
https://test-ipfs-ph.herokuapp.com/

You can see in the log after click in upload, it display the file sha256 hash then there is nothing untill the file is fully uploaded and all progress log show at the end only.

[MonarthS]

The code behind this module has changed significantly in the last release - are you still seeing this problem?

Yes, still seeing same problem, while running this example.

[achingbrain]

I'm able to see upload progress under node, over http:

const client = require('ipfs-http-client')
const { globSource } = require('.')

const main = async () => {
  const demoCall = function(data){
    console.log('uploaded : ' + data)
  }

  const ipfs = client()

  for await (const result of ipfs.add(globSource(process.argv[2], { recursive: true }) , { progress: demoCall })) {
    console.log(result);
  }
}

main()

The same thing won't work in browsers because as of right now they don't support streaming request bodies so the whole thing has to go in one blob. In fact I'm not sure the fetch API even allows upload progress monitoring, which might not be as bad as it sounds as the progress events around IPFS are emitted as blocks are created, the size of which don't always correspond to the file size due to the UnixFS protobuf wrapper.

There's more conversation here: #2838 (comment)

[christopheSeeka]

Hello, trying to follow up on this, what are the option then? im building a webapp where users will ipfs.add their file to a distant node, file can be up to 50Mb, with no upload feedback its technically hard to let the user hang with no infos for litterally minutes... What alternative or options would allow to get a progress if any?

[achingbrain]

There's an effort at ipfs/js-ipfs-utils#54 to switch out fetch for XHR that allows upload progress to be reported, it should fix this issue.

[christopheSeeka]

Awesome, happy to read that, thanks!

[christopheSeeka]

There's an effort at ipfs/js-ipfs-utils#54 to switch out fetch for XHR that allows upload progress to be reported, it should fix this issue.

Hello,
I saw that feat#54 was merged in js-ipfs-utils, will it be available in ipfs-http-client or we needs to import js-ipfs-utils to access the new progress event?