TourIAm/TIAMSharedUI/Pages/User/Media.razor

@*@using TIAMWebApp.Shared.Application.Models
@page "/user/media"
@using TIAMSharedUI.Shared @using TIAMWebApp.Shared.Application.Interfaces
@layout AdminLayout

@inject NavigationManager NavigationManager
<div class="upload-container">
    <div style="@(SelectedFilesCount > 0 ? "display: none" : string.Empty)">
        <span class="drop-file-icon mb-3"></span>
        <span class="mb-3">Click the Select Files button to select a file</span>
    </div>
    <DxUpload Name="myFile"
              UploadMode="@UploadMode.OnButtonClick"
              AllowMultiFileUpload="true"
              UploadUrl="@GetUploadUrl(APIUrls.UploadImage)"
              SelectedFilesChanged="@SelectedFilesChanged"
              MaxFileSize="15000000"
              CssClass="@(SelectedFilesCount > 0 ? "w-100" : string.Empty)">
    </DxUpload>
</div>

@code {
    int SelectedFilesCount { get; set; }
    protected void SelectedFilesChanged(IEnumerable<UploadFileInfo> files)
    {
        SelectedFilesCount = files.ToList().Count;
        InvokeAsync(StateHasChanged);
    }
    protected string GetUploadUrl(string url)
    {
        return NavigationManager.ToAbsoluteUri(url).AbsoluteUri;
    }
} *@


@rendermode RenderMode.InteractiveWebAssembly
@page "/user/media"
@using System.Net.Http.Headers
@using AyCode.Core.Loggers
@using TIAMSharedUI.Shared
@using TIAMWebApp.Shared.Application.Interfaces
@using TIAMWebApp.Shared.Application.Models
@using TIAMWebApp.Shared.Application.Utility
@layout AdminLayout
@inject IJSRuntime JSRuntime;
@inject IImageDataService imageDataService;
@inject IAcLogWriterBase BrowserConsoleLogWriter;
@implements IAsyncDisposable

<h3>File Upload</h3>

<div @ref="fileDropContainer" class="file-drop-zone @HoverClass glass" @ondragenter="OnDragEnter" @ondragleave="OnDragLeave" @ondragover="OnDragEnter">
    <InputFile OnChange="@OnChange" @ref="inputFile" multiple />
</div>
<div class="error-message-container">
    <p>@ErrorMessage</p>
</div>
<div class="image-container">
    @foreach (var imageSource in imageSources)
    {
        <img src="@imageSource" />
    }
</div>
<DxButton Text="Upload" Click="@UploadFiles" />

@code {
    ElementReference fileDropContainer;
    InputFile inputFile;

    IJSObjectReference _filePasteModule;
    IJSObjectReference _filePasteFunctionReference;

    private string HoverClass;
    private List<string> imageSources = new();
    private const int maxAllowedFiles = 2;
    private string ErrorMessage;

    private MultipartFormDataContent multipartFormData = new MultipartFormDataContent();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _filePasteModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/TIAMSharedUI/filePaste.js");

            _filePasteFunctionReference = await _filePasteModule.InvokeAsync<IJSObjectReference>("initializeFilePaste", fileDropContainer, inputFile.Element);
        }
    }

    void OnDragEnter(DragEventArgs e) => HoverClass = "hover";

    void OnDragLeave(DragEventArgs e) => HoverClass = string.Empty;

    async Task OnChange(InputFileChangeEventArgs e)
    {
        imageSources.Clear();
        ErrorMessage = string.Empty;

        if (e.FileCount > maxAllowedFiles)
        {
            ErrorMessage = $"Only {maxAllowedFiles} files can be uploaded";
            return;
        }

        foreach (var file in e.GetMultipleFiles(maxAllowedFiles))
        {
            // using var stream = file.OpenReadStream();
            // using var ms = new MemoryStream();
            // await stream.CopyToAsync(ms);
            // imageSources.Add(Convert.ToBase64String(ms.ToArray()));
            //imageSources.Add($"data:{file.ContentType};base64,{Convert.ToBase64String(ms.ToArray())}");
            //send the file to the server through an API

            var fileContent = new StreamContent(file.OpenReadStream());
            fileContent.Headers.ContentType = new MediaTypeHeaderValue(file.ContentType);
            multipartFormData.Add(fileContent, "file", file.Name);
        }

        HoverClass = string.Empty;
    }

    async Task UploadFiles()
    {
        if (multipartFormData.Headers.Count() == 0)
        {
            ErrorMessage = "No files to upload";
            return;
        }
        try
        {

            //send the files to the server through an API


            // List<StreamContent> streamContents = new List<StreamContent>();
            // foreach (var base64Image in imageSources)
            // {
            //     byte[] imageBytes = Convert.FromBase64String(base64Image);
            //     var streamContent = new StreamContent(new MemoryStream(imageBytes));
            //     streamContents.Add(streamContent);
            // }

            // var multipartContent = new MultipartFormDataContent();
            // for (int i = 0; i < streamContents.Count; i++)
            // {
            //     multipartContent.Add(streamContents[i], $"file{i}", $"file{i}.jpg");
            // }

            //send the multipartcontent to ImageData service

            await imageDataService.UploadImageAsync(multipartFormData);
        }
        catch (Exception ex)
        {
            ErrorMessage = ex.Message;

            BrowserConsoleLogWriter.Info(ex.Message);
        }
    }



    public async ValueTask DisposeAsync()
    {
        if (_filePasteFunctionReference != null)
        {
            await _filePasteFunctionReference.InvokeVoidAsync("dispose");
            await _filePasteFunctionReference.DisposeAsync();
        }

        if (_filePasteModule != null)
        {
            await _filePasteModule.DisposeAsync();
        }
    }
}