@*@using TIAMWebApp.Shared.Application.Models @page "/user/media" @using TIAMSharedUI.Shared @using TIAMWebApp.Shared.Application.Interfaces @layout AdminLayout @inject NavigationManager NavigationManager
Click the Select Files button to select a file
@code { int SelectedFilesCount { get; set; } protected void SelectedFilesChanged(IEnumerable 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.Services.Loggers @using TIAMSharedUI.Shared @using TIAMWebApp.Shared.Application.Interfaces @layout AdminLayout @inject IJSRuntime JSRuntime; @inject IImageDataService imageDataService; @inject IAcLogWriterClientBase BrowserConsoleLogWriter; @implements IAsyncDisposable

File Upload

@ErrorMessage

@foreach (var imageSource in imageSources) { }
@code { ElementReference fileDropContainer; InputFile inputFile; IJSObjectReference _filePasteModule; IJSObjectReference _filePasteFunctionReference; private string HoverClass; private List 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("import", "./_content/TIAMSharedUI/filePaste.js"); _filePasteFunctionReference = await _filePasteModule.InvokeAsync("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 streamContents = new List(); // 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(); } } }