Peer to peer send File

Here is a description of the different steps to exchange file between two users using apiRTC. ApiRTC use dataChannel for the transfer.

Create and register a UserAgent

Check our tutorial on registration if needed to create the userAgent and register.

Select a contact to start file transfer

Use sendFile() method to initiate the file transfer to your contact

        var contact = connectedSession.getContact(userId);
        var fileInfo = {
            name: file.name,
            type: file.type
        };
        fileTransferInvitation = contact.sendFile(fileInfo, file);
        console.debug("fileTransferInvitation :", fileTransferInvitation);
    

Add events listeners on Contact to be informed of fileTransferProgress

Contact#fileTransferProgress event will give you information about the transfer (percentage, duration, ...)

        contact.on('fileTransferProgress', (info) => {
             //For example, use the transfer percentage
            if(info.transferInformation.percentage === 0 || info.transferInformation.percentage === 100) {
                $( "#progressbar" ).hide();
            } else {
                $( "#progressbar" ).show();
            }
            $( "#progressbar" ).progressbar({
                value: info.transferInformation.percentage
            });
        });
    

Add events listeners on the sent Invitation to be informed of invitation status

SentInvitation#statusChange event will give you information about invitation status (accepted, declined ...)

        fileTransferInvitation
            .on('statusChange', (statusChangeInfo) => {
                console.error('statusChange :', statusChangeInfo.status);
                if(statusChangeInfo.status === apiRTC.INVITATION_STATUS_ENDED) {
                    console.error('status ended');
                    //Removing progress bar when ended
                    $("#progressbar").hide();
                    $("#cancel_" + statusChangeInfo.id).remove();
                }
            });
    

Add events listeners on Session to be informed of incoming file Tranfer Invitation

        connectedSession
            .on('fileTransferInvitation', function (invitation) {
            })
    

Add events listeners on the received Invitation to be informed of related events

        invitation
            .on('statusChange', (newStatus) => {
                console.debug('statusChange :', newStatus);
                if(newStatus === apiRTC.INVITATION_STATUS_ENDED || newStatus === apiRTC.INVITATION_STATUS_CANCELLED) {
                    console.error('status ended');
                    //Removing progress bar when ended
                    $("#progressbar").hide();
                    $("#invitationDialog").dialog("close");
                }
            })
            .on('progress', (progress) => {
                $('#file-transfer-progress').attr("style", 'width: ' + progress.percentage + '%');
                if(progress.percentage === 0 || progress.percentage === 100) {
                    $( "#progressbar" ).hide();
                } else {
                    $( "#progressbar" ).show();
                }
                $( "#progressbar" ).progressbar({
                    value: progress.percentage
                });
            });
    

Add possibility to accept or decline the file Transfer :

Accept the file transfer :

        invitation.accept()
            .then((fileObj) => {
                //File transfer done
            }).catch(function (error) {
                console.error('invitation.accept error :', error);
            });
    

Decline the file transfer :

        invitation.decline();
    

Live Demo