peerjs icon indicating copy to clipboard operation
peerjs copied to clipboard

Can't send Blob object

Open XhstormR opened this issue 1 year ago • 5 comments

Please, check for existing issues to avoid duplicates.

  • [X] No similar issues found.

What happened?

According to the documentation, sending Blob objects is supported. image But when I send a object that containing the Blob, on the other side it becomes an ArrayBuffer. image

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

XhstormR avatar Mar 25 '24 04:03 XhstormR

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

catosaurusrex2003 avatar Mar 31 '24 22:03 catosaurusrex2003

@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.

XhstormR avatar Apr 01 '24 08:04 XhstormR

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

catosaurusrex2003 avatar Apr 01 '24 09:04 catosaurusrex2003

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.

irgalamarr avatar Apr 01 '24 18:04 irgalamarr

@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

XhstormR avatar Apr 01 '24 20:04 XhstormR