Track upload progress using Peerjs

Question

Is there any method to track the upload progress while sending file/data to a WebRTC peer using peerjs?

import Peer from 'peerjs';

const peer = new Peer(peerId, { host: 'cloudbreeze-peer.onrender.com', secure: true })
peer.on('connection', conn => {
    const file = html_file_object
    const peerName = conn.metadata.username || 'Anonymous user'
    conn.on('open', () => {
        conn.send({ file, name: file.name, size: file.size, type: 'file' })

        // track the progress of the file sent ('progress' listener is not available)
        conn.on('progress', bytes => console.log(bytes * 100 / file.size))
    })
}

I tried a way to divide the file into small chunks, it helped to track the progress on the receiving end, but I still couldn't track the uploading progress.

import Peer from 'peerjs';

const peer = new Peer(peerId, { host: 'cloudbreeze-peer.onrender.com', secure: true })
peer.on('connection', conn => {
    const file = html_file_object
    const peerName = conn.metadata.username || 'Anonymous user'
    conn.on('open', () => {
        const chunkSize = 1024 * 1024 // In bytes
        const chunks = Math.ceil(size / chunkSize)
        for (let i = 0; i < chunks; i++) {
            const offset = i * chunkSize
            conn.send({ file: file.slice(offset, offset + chunkSize), name, size, type: 'file' })
            // still no way to track the progress
        }
    })
}

Thanks in advance for helping me out!

Answer 1

sent back received data percentages info to that sender as a text message