I can read and write to a serial port seperately with two seperate buttons (onclick) .Now I try to write to the serial port , when a value ('Please send the file') is read from same port on a single click button .Below is my code which shows errors

1. TypeError: Failed to execute 'write' on 'UnderlyingSinkBase': The provided value is not of type '(ArrayBuffer or ArrayBufferView)'.

2. Uncaught (in promise) TypeError: Failed to execute 'pipeTo' on 'ReadableStream': Cannot pipe a locked stream.

navigator.serial.requestPort().then(async (port) => {

  await port.open({   baudRate: 115200  });


// Reading port //

  while (port.readable) {
    const textDecoder = new TextDecoderStream();
    const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
    const reader = textDecoder.readable.getReader();

    try {
      while (true) {
        const { value, done } = await reader.read();

        if (done) {
         
          break;
        }
        if (value) {

          document.getElementById('log').innerHTML += value + "<br/>";
          
          if(value.includes('Please send the file')){
     

            var arr=[];

            // Getting file to be sent //

var oReq = new XMLHttpRequest();
oReq.open("GET", "uart_rx_test2.bin", true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
 var arrayBuffer = oReq.response; // Note: not oReq.responseText


 if (arrayBuffer) {
   var byteArray = new Uint8Array(arrayBuffer);

arr = byteArray;


 }
};

oReq.send(null);

   

// Writing to port //

  const writer = port.writable.getWriter();
  await writer.write(arr);

   }


        }
      }
    } catch (error) {
      console.log(error)
    }
  }

}).catch((e) => {
  console.log(e)

});