File Transfer Flow

ErikrafT Drop implements a sophisticated file transfer system that handles everything from small text messages to large multi-gigabyte files. The system uses WebRTC DataChannels for direct peer-to-peer transfers with WebSocket fallback when necessary.

Transfer Lifecycle Overview

File Selection and Metadata

File Processing

// From network.js lines 675-702
async requestFileTransfer(files) {
    let header = [];
    let totalSize = 0;
    let imagesOnly = true;

    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const fileHeader = {
            name: file.name,
            size: file.size,
            mime: file.type || mime.defaultMime
        };

        header.push(fileHeader);
        totalSize += file.size;

        if (!mime.isImage(file)) {
            imagesOnly = false;
        }
    }

    this._filesRequested = files;
    this.sendJSON({
        type: 'request',
        header: header,
        totalSize: totalSize,
        imagesOnly: imagesOnly
    });
}

MIME Type Detection

The system automatically detects and adds missing MIME types:

// From network.js line 1464
let files = mime.addMissingMimeTypesToFiles([...message.files]);

Transfer Request Protocol

Request Message Structure

{
    type: 'request',
    header: [
        {
            name: 'document.pdf',
            size: 1048576,
            mime: 'application/pdf'
        }
    ],
    totalSize: 1048576,
    imagesOnly: false
}

Request Handling

// From network.js lines 813-839
_onFilesTransferRequest(request) {
    if (this._requestPending) {
        this.sendJSON({type: 'files-transfer-response', accepted: false});
        return;
    }

    if (window.iOS && request.totalSize >= 200*1024*1024) {
        this.sendJSON({
            type: 'files-transfer-response',
            accepted: false,
            reason: 'ios-memory-limit'
        });
        return;
    }

    this._requestPending = request;
    Events.fire('files-transfer-request', {
        request: request,
        peerId: this._peerId
    });
}

File Chunking System

FileChunker Class

The FileChunker class breaks large files into manageable chunks:

// From network.js lines 1668-1716
class FileChunker {
    constructor(file, onChunk, onPartitionEnd) {
        this._chunkSize = 64000; // 64 KB
        this._maxPartitionSize = 1e6; // 1 MB
        this._offset = 0;
        this._partitionSize = 0;
        this._file = file;
        this._onChunk = onChunk;
        this._onPartitionEnd = onPartitionEnd;
        this._reader = new FileReader();
        this._reader.addEventListener('load', e => this._onChunkRead(e.target.result));
    }
}

Chunk Reading Process

// From network.js lines 1687-1702
_readChunk() {
    const chunk = this._file.slice(this._offset, this._offset + this._chunkSize);
    this._reader.readAsArrayBuffer(chunk);
}

_onChunkRead(chunk) {
    this._offset += chunk.byteLength;
    this._partitionSize += chunk.byteLength;
    this._onChunk(chunk);
    if (this.isFileEnd()) return;
    if (this._isPartitionEnd()) {
        this._onPartitionEnd(this._offset);
        return;
    }
    this._readChunk();
}

Transfer Execution

Header Transmission

// From network.js lines 729-748
async _sendFile(file) {
    this.sendJSON({
        type: 'header',
        size: file.size,
        name: file.name,
        mime: file.type || mime.defaultMime
    });

    this._chunker = new FileChunker(
        file,
        chunk => this._send(chunk),
        offset => this._onPartitionEnd(offset)
    );
    this._chunker.nextPartition();
}

Progress Tracking

// From network.js lines 763-765
_sendProgress(progress) {
    this.sendJSON({ type: 'progress', progress: progress });
}

Partition Management

// From network.js lines 750-756
_onPartitionEnd(offset) {
    this.sendJSON({ type: 'partition', offset: offset });
}

_onReceivedPartitionEnd(offset) {
    this.sendJSON({ type: 'partition-received', offset: offset });
}

File Reception and Assembly

FileDigester Class

The FileDigester class reassembles received chunks:

// From network.js lines 1718-1746
class FileDigester {
    constructor(meta, totalSize, totalBytesReceived, callback) {
        this._buffer = [];
        this._bytesReceived = 0;
        this._size = meta.size;
        this._name = meta.name;
        this._mime = meta.mime;
        this._totalSize = totalSize;
        this._totalBytesReceived = totalBytesReceived;
        this._callback = callback;
    }

    unchunk(chunk) {
        this._buffer.push(chunk);
        this._bytesReceived += chunk.byteLength || chunk.size;
        this.progress = (this._totalBytesReceived + this._bytesReceived) / this._totalSize;
        if (isNaN(this.progress)) this.progress = 1;

        if (this._bytesReceived < this._size) return;

        const blob = new Blob(this._buffer);
        this._buffer = null;
        this._callback(new File([blob], this._name, {
            type: this._mime || "application/octet-stream",
            lastModified: new Date().getTime()
        }));
    }
}

Message Types and Protocols

Transfer Control Messages

Request Message

{
    type: 'request',
    header: [...],
    totalSize: number,
    imagesOnly: boolean
}

Response Message

{
    type: 'files-transfer-response',
    accepted: boolean,
    reason?: string
}

Header Message

{
    type: 'header',
    name: string,
    size: number,
    mime: string
}

Progress Message

{
    type: 'progress',
    progress: number // 0.0 to 1.0
}

Partition Messages

{
    type: 'partition',
    offset: number
}

{
    type: 'partition-received',
    offset: number
}

Completion Messages

{
    type: 'file-transfer-complete'
}

{
    type: 'message-transfer-complete'
}

Error Handling and Recovery

Transfer Cancellation

// From network.js lines 841-847
_respondToFileTransferRequest(accepted) {
    this.sendJSON({type: 'files-transfer-response', accepted: accepted});
    if (accepted) {
        this._requestAccepted = this._requestPending;
        this._totalBytesReceived = 0;
        this._filesReceived = [];
    }
    this._requestPending = null;
}

Connection Error Handling

// From network.js lines 869-873
_onChunkReceived(chunk) {
    if (!this._digester) {
        console.error("Received chunk but no digester active");
        return;
    }
    this._digester.unchunk(chunk);
}

Transfer Completion

// From network.js lines 902-913
_onFileTransferCompleted() {
    const fileBlob = this._filesReceived[0];
    this._totalBytesReceived += fileBlob.size;
    this._completeTransfer('receive', true);

    this.sendJSON({type: 'file-transfer-complete'});

    const sameSize = fileBlob.size === acceptedHeader.size;
    const sameName = fileBlob.name === acceptedHeader.name;
    Events.fire('file-received', {
        file: fileBlob,
        peerId: this._peerId,
        imagesOnly: request.imagesOnly,
        sameSize,
        sameName
    });
}

Performance Optimizations

Memory Management

Streaming: Files are processed in chunks to prevent memory overload
Buffer Cleanup: Automatic cleanup of completed transfers
iOS Limits: Special handling for iOS memory constraints

Network Efficiency

Chunk Size: 64KB chunks balance memory usage and network efficiency
Partition Tracking: 1MB partitions for progress reporting
Binary Transfer: Direct binary data transfer via DataChannels

Progress Feedback

Real-time Updates: Continuous progress reporting during transfer
Partition Tracking: Granular progress for large files
UI Integration: Seamless integration with user interface

WebSocket Fallback

When WebRTC is unavailable, transfers fall back to WebSocket:

// From network.js lines 1322-1327
_send(chunk) {
    this.sendJSON({
        type: 'ws-chunk',
        chunk: arrayBufferToBase64(chunk)
    });
}

Base64 Encoding

// From network.js lines 1454-1456
const messageJSON = JSON.parse(message);
if (messageJSON.type === 'ws-chunk') message = base64ToArrayBuffer(messageJSON.chunk);

This file transfer system provides robust, efficient file sharing with comprehensive error handling and fallback mechanisms for maximum compatibility.

Documentation Index

​File Transfer Flow

​Transfer Lifecycle Overview

​File Selection and Metadata

​File Processing

​MIME Type Detection

​Transfer Request Protocol

​Request Message Structure

​Request Handling

​File Chunking System

​FileChunker Class

​Chunk Reading Process

​Transfer Execution

​Header Transmission

​Progress Tracking

​Partition Management

​File Reception and Assembly

​FileDigester Class

​Message Types and Protocols

​Transfer Control Messages

​Request Message

​Response Message

​Header Message

​Progress Message

​Partition Messages

​Completion Messages

​Error Handling and Recovery

​Transfer Cancellation

​Connection Error Handling

​Transfer Completion

​Performance Optimizations

​Memory Management

​Network Efficiency

​Progress Feedback

​WebSocket Fallback

​Base64 Encoding