@inject IJSRuntime js


<div class="flex  p-64 h-screen w-screen">
    <div id="dropzone" name="file" class="w-full h-96 bg-gray-300 rounded-2xl " type="file"></div>
    <img id="cropped-image" class="w-full h-screen py-60" src="" alt="">

    <div id="cropped" class="hidden">
        <img id="cropped-image" class="w-full h-96" src="" alt="">
        <div class="flex">
            <button type="button" @onclick="RemoveCropped" class="btn btn-primary">Remove</button>
        </div>
    </div>

</div>


@code {

    [Parameter]
    public string UploadLink { get; set; }

    protected override async Task OnInitializedAsync()
    {

    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await js.InvokeVoidAsync("startCropper");
        }
    }

    async Task RemoveCropped()
    {
        await js.InvokeVoidAsync("removeCropped");
    }

    public async Task<string> UploadPhoto()
    {
        var photoLink = "";

        return photoLink;
    }

}