using AspNetCoreAngularSignalR.Model;
using Microsoft.AspNetCore.SignalR;

namespace AspNetCoreAngularSignalR.SignalRHubs;

public class ImagesMessageHub : Hub
{
    public Task ImageMessage(ImageMessage file)
    {
        return Clients.All.SendAsync("ImageMessage", file);
    }
}

namespace AspNetCoreAngularSignalR.Model;

public class ImageMessage
{
    public byte[]? ImageBinary { get; set; }
    public string ImageHeaders { get; set; } = string.Empty;
}

using AspNetCoreAngularSignalR.Providers;
using AspNetCoreAngularSignalR;
using Microsoft.EntityFrameworkCore;
using AspNetCoreAngularSignalR.SignalRHubs;

var builder = WebApplication.CreateBuilder(args);

builder.WebHost.ConfigureKestrel(serverOptions =>
{
    serverOptions.AddServerHeader = false;
});

var services = builder.Services;
var configuration = builder.Configuration;
var env = builder.Environment;

services.AddTransient<ValidateMimeMultipartContentFilter>();

services.AddCors(options =>
{
    options.AddPolicy("AllowAllOrigins",
        builder =>
        {
            builder
                .AllowCredentials()
                .WithOrigins(
                    "https://localhost:4200")
                .SetIsOriginAllowedToAllowWildcardSubdomains()
                .AllowAnyHeader()
                .AllowAnyMethod();
        });
});

services.AddSignalR()
  .AddMessagePackProtocol();


var app = builder.Build();

// IdentityModelEventSource.ShowPII = true;

app.UseCors("AllowAllOrigins");

app.UseDefaultFiles();
app.UseStaticFiles();

app.UseRouting();

app.MapHub<ImagesMessageHub>("/zub");


app.Run();

using AspNetCoreAngularSignalR.Model;
using AspNetCoreAngularSignalR.SignalRHubs;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;

namespace AspNetCoreAngularSignalR.Controllers;

[Route("api/[controller]")]
public class FileUploadController : Controller
{
    private readonly IHubContext<ImagesMessageHub> _hubContext;

    public FileUploadController(IHubContext<ImagesMessageHub> hubContext)
    {
        _hubContext = hubContext;
    }

    [Route("files")]
    [HttpPost]
    [ServiceFilter(typeof(ValidateMimeMultipartContentFilter))]
    public async Task<IActionResult> UploadFiles(FileDescriptionShort fileDescriptionShort)
    {
        if (ModelState.IsValid)
        {
            foreach (var file in fileDescriptionShort.File!)
            {
                if (file.Length > 0)
                {
                    using var memoryStream = new MemoryStream();
                    await file.CopyToAsync(memoryStream);

                    var imageMessage = new ImageMessage
                    {
                        ImageHeaders = "data:" + file.ContentType + ";base64,",
                        ImageBinary = memoryStream.ToArray()
                    };

                    await _hubContext.Clients.All.SendAsync("ImageMessage", imageMessage);
                }
            }
        }

        return Redirect("/FileClient/Index");
    }
}

import { Component, OnInit } from '@angular/core';
import { HubConnection } from '@microsoft/signalr';
import * as signalR from '@microsoft/signalr';

import { ImageMessage } from '../imagemessage';

@Component({
  selector: 'app-images-component',
  templateUrl: './images.component.html',
})
export class ImagesComponent implements OnInit {
  private _hubConnection: HubConnection | undefined;
  public async: any;
  message = '';
  messages: string[] = [];

  images: ImageMessage[] = [];

  constructor() {}

  ngOnInit() {
    this._hubConnection = new signalR.HubConnectionBuilder()
      .withUrl('https://localhost:44324/zub')
      .configureLogging(signalR.LogLevel.Trace)
      .build();

    this._hubConnection.stop();

    this._hubConnection.start().catch((err) => {
      console.error(err.toString());
    });

    this._hubConnection.on('ImageMessage', (data: any) => {
      console.log(data);
      this.images.push(data);
    });
  }
}

<div class="container-fluid">
  <h1>Images</h1>

  <a href="https://localhost:44324/FileClient/Index" target="_blank"
    >Upload Images</a
  >

  <div *ngIf="images.length > 0">
    <img
      *ngFor="let image of images"
      width="150"
      style="margin-right: 5px"
      [src]="image.imageHeaders + image.imageBinary"
    />
  </div>
</div>

<form enctype="multipart/form-data" method="post" action="https://localhost:44324/api/FileUpload/files" id="ajaxUploadForm" novalidate="novalidate">

    <fieldset>
        <legend style="padding-top: 10px; padding-bottom: 10px;">Upload Images</legend>

        <div class="col-xs-12" style="padding: 10px;">
            <div class="col-xs-4">
                <label>Upload</label>
            </div>
            <div class="col-xs-7">
                <input type="file" id="fileInput" name="file" multiple>
            </div>
        </div>

        <div class="col-xs-12" style="padding: 10px;">
            <div class="col-xs-4">
                <input type="submit" value="Upload" id="ajaxUploadButton" class="btn">
            </div>
            <div class="col-xs-7">

            </div>
        </div>

    </fieldset>

</form>