Example

Browser-to-browser file transfer

Trystero actions can send binary data directly over WebRTC data channels. Use metadata to keep filenames and progress connected to each transfer.

Send a file with metadata and progress

Blob and typed-array payloads are handled automatically, including chunking and progress reporting.

import {joinRoom} from 'trystero'

const room = joinRoom({appId: 'file-drop'}, dropId)
const fileAction = room.makeAction('file')

fileAction.onReceiveProgress = (progress, {peerId, metadata}) => {
  updateProgress(peerId, metadata.name, progress)
}

fileAction.onMessage = async (file, {peerId, metadata}) => {
  const url = URL.createObjectURL(file)
  showDownload({
    peerId,
    url,
    name: metadata.name,
    size: metadata.size
  })
}

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

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