ASP.NET MVC - Upload a file with SignalR

Question

I want to upload a file from the client to the server. Is there a way to upload a file with SignalR or must i need a Controller for this?

Answer 1

While SignalR cannot help with the actual upload, it can be used for updating the client with progress while a file is uploaded.

Answer 2

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; }
    }

Answer 3

SignalR is for real time messaging not uploading files.