Share files using File.js

HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?

Relevant tutorial: How to share files using WebRTC Data Channel (RTP/SCTP) APIs?

This tutorial introduces a new library called "File.js" which can be used alongwidth any framework or realtime protocol like WebSockets/SCTP/etc. to share files of any size concurrently.

First Step: Link the Library

<script src=""></script>

Second Step: Setup ProgressBar Helpers

var progressHelper = {};
var outputPanel = document.body;

var fileHelper = {
    onBegin: function (file) {
        var div = document.createElement('div');
        div.title =;
        div.innerHTML = '<label>0%</label> <progress></progress>';
        outputPanel.insertBefore(div, outputPanel.firstChild);
        progressHelper[file.uuid] = {
            div: div,
            progress: div.querySelector('progress'),
            label: div.querySelector('label')
        progressHelper[file.uuid].progress.max = file.maxChunks;
    onEnd: function (file) {
        progressHelper[file.uuid].div.innerHTML = '<a href="' + file.url + '" target="_blank" download="' + + '"<' + + '</a>';
    onProgress: function (chunk) {
        var helper = progressHelper[chunk.uuid];
        helper.progress.value = chunk.currentPosition || chunk.maxChunks || helper.progress.max;
        updateLabel(helper.progress, helper.label);

function updateLabel(progress, label) {
    if (progress.position == -1) return;
    var position = +progress.position.toFixed(2).split('.')[1] || 100;
    label.innerHTML = position + '%';
  1. "progressHelper" is a user-defined variable used to store progress-bars of the each file. It is useful to display multiple progress-bars at the same time!
  2. "outputPanel" is another user-defined variable used to display progress-bars.
  3. "uuid" is files unique identifier; used to allow multiple files "concurrent" but "guaranteed" transmission.

Third Setp: Send One or More Files Concurrently

    file: file,
    channel: peer,
    interval: 100,
    chunkSize: 1000, // 1000 for RTP; or 16k for SCTP
                     // chrome's sending limit is 64k; firefox' receiving limit is 16k!
    onBegin: fileHelper.onBegin,
    onEnd: fileHelper.onEnd,
    onProgress: fileHelper.onProgress
  1. "file" can be input[type=file] or Blob
  2. "channel" can be, websockets or webrtc-peer
  3. "interval" is optional; lets you customize how quickly transmit chunks
  4. "chunkSize" lets you customize size of the single chunk; default is 40k
  5. "onBegin" is fired as quickly as you send a file
  6. "onProgress" is fired on sending a chunk
  7. "onEnd" is fired on sending entire file

Fourth Step: Receive Files

var fleReceiver = new File.Receiver(fileHelper);
peer.onmessage = function (data) {
  1. On the constructor; you need to pass an object like {onBegin, onEnd, onProgress}:
    1. "onBegin" is fired as quickly as you send a file
    2. "onProgress" is fired on receiving a chunk
    3. "onEnd" is fired on receiving entire file
  2. "receive" method must be called as soon as your signalling solution gets/receives the chunk.


Enter your email too; if you want "direct" reply!

Latest Updates