Can't send Blob object

[XhstormR]

Please, check for existing issues to avoid duplicates.

• No similar issues found.

What happened?

According to the documentation, sending Blob objects is supported.

But when I send a object that containing the Blob, on the other side it becomes an ArrayBuffer.

Corresponding code:

let result = conn.send({
    strings: 'hi!',
    numbers: 150,
    arrays: [1, 2, 3],
    evenBinary: new Blob(['<q id="a"><span id="b">hey!</span></q>'], { type: 'text/html' }),
    andMore: { bool: true },
});

other side:

conn.on('data', data => {
    console.log('listenConn data', data);
});

How can we reproduce the issue?

No response

What do you expected to happen?

Able to successfully send Blob object.

Environment setup

• OS: MacOs Darwin 23.4.0 x86_64 i386
• Platform: Google Chrome
• Browser: Google Chrome 123.0.6312.59

Is this a regression?

peerjs 1.5.2, angular 17.3.0, Google Chrome 123.0.6312.59

Anything else?

No response

[catosaurusrex2003]

you are sending the blob correctly. you just have to convert it back to a blob while recieving.

conn.on('data', data => {
  console.log('listenConn data', data);
  if (data.evenBinary instanceof ArrayBuffer) {
    const blob = new Blob([data.evenBinary], { type: 'text/html' });
    // Now you have a Blob object
  }
});

check if this snippet works

[XhstormR]

@catosaurusrex2003 This means peerjs will only transfer the bytes of the blob, but will ignore the type field, I need to handle the type field myself, right?

Background：This Blob object is a local file selected by the user, so I cannot sure the type of this file.

[catosaurusrex2003]

my bad. i read your issue wrong. yes this is a bug i think.

[irgalamarr]

Hi @XhstormR,
the behavior you noticed is actually expected, but we see how our documentation might have confused you. We're sorry for that mix-up and we're working on making our docs better.

For now, we suggest looking at this example about transferring files with PeerJS. It should clear things up and show you how to handle the file transfer process. If you have more questions, just let us know; we're here to help.

[XhstormR]

@irgalamarr Thanks. As shown in the example, I need to handle the type field myself.

https://github.com/chidokun/p2p-file-transfer/blob/main/src/App.tsx#L65