SignalR chat application sending images

Question

I have build the SingnalR chat application MVC5 signalR 2.0 , from the tutorial :- http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-getting-started-with-signalr-20-and-mvc-5 And it is all working brilliantly, though is there a way to send images/ attachments? and with the images actually displaying on the screen?

Answer 1

The way that Jabbr (the IRC-like web based chat system based on SignalR) does it is it uploads files to an Azure blob container from the client (via a server side upload handler) and then sends the direct blob URI back down to all clients, who access the file directly.

Take a look at the code here: https://github.com/JabbR/JabbR

Answer 2

I would advise you - send images and messages by WebApi (no SignalR), and then notify all participants in the chat by SignalR.

Answer 3

No. SignalR is a text base signaling. All you can do -- is send urls, json.. Or you may consider to transfer base64 string representation of an image, but I bet it is not very frendly usage case.

Answer 4

This file uploading using file input bootstrap plugin (krajee) You can also upload file without using this plugin.

   @section Page{

<script src="~/Scripts/bootstrap-switch.min.js"></script>
<script src="~/Scripts/Uploader/fileinput.js"></script>
<link href="~/Scripts/Uploader/fileinput.css" rel="stylesheet" />
<script>
    var itemHub = $.connection.ItemHub;
$(document).ready(function() {
    $.connection.hub.start().done(function() {

       //do any thing

    });
     $("#fileinput").fileinput({
         allowedFileExtensions: ["jpg", "png", "gif", "jpeg"],
         maxImageWidth: 700,
         maxImageHeight: 700,
         resizePreference: 'height',
         maxFileCount: 1,
         resizeImage: true
     });


     $("#fileinput").on('fileloaded', function (event, file, previewId, index, reader) {


         var readers = new FileReader();
         readers.onloadend = function () {
             $(".file-preview-image").attr('src', readers.result);
         }
         readers.readAsDataURL(file);
     });




    $('#btnSave').click(function() {
        var imagesJson = $('.file-preview-image').map(function () {
            var $this = $(this);
            return {
                image: $this.attr('src'),
                filename: $this.attr('data-filename')
            };
        }).toArray();

        itemHub.server.getByteArray(imagesJson);
    });
});

</script>
}

Hub class code

[HubName("ItemHub")]
public class ItemHub : Hub
{
      public void GetByteArray(IEnumerable<ImageData> images)
      {
         foreach (var item in images ?? Enumerable.Empty<ImageData>())
         {
            var tokens = item.Image.Split(',');
            if (tokens.Length > 1)
            {
               byte[] buffer = Convert.FromBase64String(tokens[1]);

            }
          }
      }
}

public class ImageData
{
    public string Description { get; set; }
    public string Filename { get; set; }
    public string Image { get; set; }
}