Image Upload Issue .NET 6.0

[migratingcub]

Hello,

I'm working on a project targeting .NET 6.0 and seeing the following after setting the Cropper ImageFile property to the uploaded file:

Here is my markup for the InputFile and Cropper

 <InputFile id="profileImageUploader" OnChange="OnInputFileChange" accept="image/jpg, image/jpeg, image/png" />

<Cropper InputId="profileImageUploader" @ref="profileImageCropper" ImageFile="file" CropperHeight="400"
    MaxCropedHeight="MaxImageHeight" MaxCropedWidth="MaxImageWidth" AspectRatio="1" RequireAspectRatio="true"
    InitCropHeight="50" InitCropWidth="50"
    IsCropLocked="false" @bind-Ratio="ratio" PureCSharpProcessing="true"
    IsImageLocked="true"></Cropper>

Here is where I'm setting the ImageFile

async Task OnInputFileChange(InputFileChangeEventArgs args)
{
    await JSRuntime.InvokeVoidAsync("console.log", DateTime.Now.ToString());
    var upload = false;
    file = args.File;
    StringContent content = null;
    var profilePictureString = string.Empty;

    //  Check file type
    var fileExtension = file.ContentType;
    if (new List<string>() { "image/jpg", "image/jpeg", "image/png" }.Contains(fileExtension) == false)
    {
        //  TODO: show error
        throw new InvalidDataException("wrong file type");
    }

    //  Check file dimensions
    if (file.Size > MaxFileSize)
    {
        //  TODO: show error
        throw new InvalidDataException("file too big");
    }
}

I tested this in the ServerSideCropperExample project that's available and confirmed that the issue exists there as well.

.NET 5.0

.NET 6.0

[Chronostasys]

Hi @migratingcub , thanks for using the cropper.
I can't reproduce this bug on my pc. Could you upload the original image you crop?
By the way, are you using server-side blazor?

[migratingcub]

Hi @migratingcub , thanks for using the cropper. I can't reproduce this bug on my pc. Could you upload the original image you crop? By the way, are you using server-side blazor?

Thanks for your reply! Yes, I am using server-side blazor.

Original image here:

Edit:

The sample project I'm using is here: https://github.com/Chronostasys/ServerSideCropperExample

[Chronostasys]

Seems it's the same issue as https://github.com/Chronostasys/ServerSideCropperExample/issues/1 .
As it's a bug of ast.net core 6, I would recommend you to use client side version or turn back to dotnet 5.

[migratingcub]

Seems it's the same issue as Chronostasys/ServerSideCropperExample#1 . As it's a bug of ast.net core 6, I would recommend you to use client side version or turn back to dotnet 5.

I was able to get a workaround working with the following:

In the Blazor.Cropper Project, Cropper.razor.cs page,

protected override async Task OnParametersSetAsync()
{
// ommitted code

if (PureCSharpProcessing || string.IsNullOrEmpty(InputId) || (ext == "gif" && AnimeGifEnable))
{
    byte[] buffer = new byte[resizedImageFile.Size];

    // PREVIOUS CODE
    //await resizedImageFile.OpenReadStream(100000000).ReadAsync(buffer);

    // WORKAROUND
    var fileContent = new StreamContent(resizedImageFile.OpenReadStream(1024 * 1024 * 15));
    buffer = await fileContent.ReadAsByteArrayAsync();

   // ommitted code
}

// ommitted code
}

[Chronostasys]

Seems it's the same issue as Chronostasys/ServerSideCropperExample#1 . As it's a bug of ast.net core 6, I would recommend you to use client side version or turn back to dotnet 5.

I was able to get a workaround working with the following:

In the Blazor.Cropper Project, Cropper.razor.cs page,

protected override async Task OnParametersSetAsync()
{
// ommitted code

if (PureCSharpProcessing || string.IsNullOrEmpty(InputId) || (ext == "gif" && AnimeGifEnable))
{
    byte[] buffer = new byte[resizedImageFile.Size];

    // PREVIOUS CODE
    //await resizedImageFile.OpenReadStream(100000000).ReadAsync(buffer);

    // WORKAROUND
    var fileContent = new StreamContent(resizedImageFile.OpenReadStream(1024 * 1024 * 15));
    buffer = await fileContent.ReadAsByteArrayAsync();

   // ommitted code
}

// ommitted code
}

Added this walkaround in 1.2.6. Thanks so much for giving the idea.

[migratingcub]

Seems it's the same issue as Chronostasys/ServerSideCropperExample#1 . As it's a bug of ast.net core 6, I would recommend you to use client side version or turn back to dotnet 5.

I was able to get a workaround working with the following: In the Blazor.Cropper Project, Cropper.razor.cs page,

protected override async Task OnParametersSetAsync()
{
// ommitted code

if (PureCSharpProcessing || string.IsNullOrEmpty(InputId) || (ext == "gif" && AnimeGifEnable))
{
    byte[] buffer = new byte[resizedImageFile.Size];

    // PREVIOUS CODE
    //await resizedImageFile.OpenReadStream(100000000).ReadAsync(buffer);

    // WORKAROUND
    var fileContent = new StreamContent(resizedImageFile.OpenReadStream(1024 * 1024 * 15));
    buffer = await fileContent.ReadAsByteArrayAsync();

   // ommitted code
}

// ommitted code
}

Added this walkaround in 1.2.6. Thanks so much for giving the idea.

No problem! Happy to help :)