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="https://www.WebRTC-Experiment.com/File.js"></script>

Second Step: Setup ProgressBar Helpers

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

var fileHelper = {
    onBegin: function (file) {
        var div = document.createElement('div');
        div.title = file.name;
        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="' + file.name + '"<' + file.name + '</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.Send({
    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 socket.io, 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) {
    fleReceiver.receive(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.


Feedback

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

Latest Updates