Build peer-to-peer file transfer in JavaScript

Why send files peer-to-peer?

Traditional file transfer uploads the file to your server, then downloads it to every recipient. Peer-to-peer transfer can avoid that round trip when the sender and receiver are online at the same time.

That makes it useful for one-time file drops, local-network sharing, multiplayer asset exchange, collaborative tools, temporary support sessions, and apps where files should not sit on a backend by default.

Send a file over a Trystero action

Actions can send Blob, File, typed arrays, strings, and objects. Attach metadata so the receiver can render a useful download row before or after the payload arrives.

import {joinRoom} from 'trystero'

const room = joinRoom({appId: 'com.example.dropzone'}, transferId)
const files = room.makeAction('file')

files.onReceiveProgress = (progress, {peerId, metadata}) => {
  renderIncomingProgress(peerId, metadata.name, progress)
}

files.onMessage = (file, {peerId, metadata}) => {
  const url = URL.createObjectURL(file)

  addDownload({
    peerId,
    url,
    name: metadata.name,
    size: metadata.size,
    type: metadata.type
  })
}

fileInput.onchange = () => {
  const file = fileInput.files?.[0]

  if (!file) return

  files.send(file, {
    metadata: {
      name: file.name,
      size: file.size,
      type: file.type
    },
    onProgress: progress => renderSendProgress(file.name, progress)
  })
}

Product details to handle

Keep both tabs open while the transfer is active, show progress for both sender and receiver, and set expectations around very large files or unstable networks. WebRTC still depends on network traversal, so some users may need TURN infrastructure for hard NAT cases.

If you need offline delivery, virus scanning, resumable downloads after a browser closes, or a permanent audit trail, combine peer-to-peer transfer with server storage for those specific paths.