I’m encountering an error while trying to send images using SignalR. For the client-side, I’m using Angular 10, and for the server-side, I’m using ASP.NET Core 6.

Below is the code snippet from my SignalR hub:

public async Task SendImageToAdmin(string user, string receiverConnectionId, byte[]? imageData)
{
    await Clients.Client(receiverConnectionId).SendAsync("ReceiveImage", user, imageData);
}

In my Angular service, I have the following method:

public async sendImage(user: string, receiverId: string, arrayBuffer: ArrayBuffer) {
  const uint8Array = new Uint8Array(arrayBuffer);
  return this.connection.invoke("SendImageToAdmin", user, receiverId, uint8Array);
}

And here’s the implementation in the component:

async handleImageUpload(event: any) {
  const user = this.username; // Replace with the current user's ID
  const receiverId = this.ReceiverId; // Replace with the recipient's ID
  const imageFile = event.target.files[0];
  await this.uploadImage(user, receiverId, imageFile);
}

async uploadImage(user: string, receiverId: string, imageFile: File) {
  const reader = new FileReader();
  reader.onload = async () => {
    const arrayBuffer = reader.result as ArrayBuffer;
    await this.chatService.sendImage(user, receiverId, arrayBuffer);
  };
  reader.readAsArrayBuffer(imageFile);
}

And here’s the HTML code:

<input type="file" (change)="handleImageUpload($event)" accept="image/*">

However, upon uploading an image, I’m encountering the following error:

Error: Failed to invoke 'SendImageToAdmin' due to an error on the server.

Could you please assist me in finding a solution to this issue?