3900-MyRecipes-backup / Client / Pages / ImageEditor.razor
ImageEditor.razor
Raw
@using Microsoft.AspNetCore.Authorization;
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
@using MyRecipes2.Shared;
@using System;
@using System.IO;
@using System.Text;
@inject HttpClient Http;

@if (ImageId == null)
{
    <div style="display: flex; justify-content: center; align-items: center; height: 20rem;" class="border">
        <div>
            <InputFile hidden id="upload" OnChange="@LoadFiles" />
            <label for="upload" class="btn btn-light align-middle">Choose file</label>
        </div>
    </div>
}
else
{
    <div style="display: flex; justify-content: center; align-items: center; height: 20rem; background-image: url(@ImageUrl); background-size: cover;" class="border">
        <div>
            <InputFile hidden id="upload" OnChange="@LoadFiles" />
            <label for="upload" class="btn btn-light align-middle">Change Image</label>
        </div>
    </div>
}


@code {

    public int? ImageId { get; set; }

    public void SetImageId(int? imageId)
    {
        ImageId = imageId;
        StateHasChanged();
    }

    protected override void OnInitialized()
    {
        ImageId = null;
    }

    private string ImageUrl
    {
        get
        {
            return "/Image/" + ImageId.ToString();
        }
    }

    protected bool IsValid()
    {
        return true;
    }

    private async void LoadFiles(InputFileChangeEventArgs e)
    {
        byte[] bytes;
        using (var memoryStream = new MemoryStream())
        {
            await e.File.OpenReadStream().CopyToAsync(memoryStream);
            bytes = memoryStream.ToArray();
        }

        string base64 = Convert.ToBase64String(bytes);

        UploadImageDto request = new();
        request.Base64FileEncode = base64;
        request.MimeType = e.File.ContentType;
        HttpResponseMessage message = await Http.PostAsJsonAsync<UploadImageDto>("Image", request);
        ImageId = await message.Content.ReadFromJsonAsync<int>();
        StateHasChanged();
    }
}