How can I send image using SignalR?

Question

I built an application with angular 10 as frontend and .net core 5 as backend, through this application people can chat and send images to each other in realtime. I could implement chatting functionality using signalR but I don't have any idea how to do that to send images, please give me a strong reference to help me do that

Answer 1

One solution would be sending the files as a base64 string using signalR.

You could use the javascript FileReader class to convert the files to their base64 equivilent on the client side. E.G.

const toBase64 = (file) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
});

async function Main() {
   const file = document.querySelector('#myfile').files[0];
   console.log(await toBase64(file));
}

Main();

You could then create a class server side for the uploaded files like:

public class SignalRFileUpload {
    public string FileName { get; set; }
    public string ContentType { get; set; }
    public string FileContent { get; set; }
}

You could then send the file/s using signalR as you would any other data.

Then you could either store them as strings on the server or perhaps convert them to byte[] using:

Convert.FromBase64String(FileContent);

This solution should be fine with smaller images under a couple MB or so. Any bigger than that and I am sure it would become problematic. I have never tried before so I cant be certain.