The Wayback Machine - https://web.archive.org/web/20210818173238/https://github.com/dotnet/aspnetcore/issues/35156
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blazor InputFile RequestImageFileAsync not revoking ObjectURL #35156

Open
MichelJansson opened this issue Aug 8, 2021 · 2 comments
Open

Blazor InputFile RequestImageFileAsync not revoking ObjectURL #35156

MichelJansson opened this issue Aug 8, 2021 · 2 comments

Comments

@MichelJansson
Copy link

@MichelJansson MichelJansson commented Aug 8, 2021

Describe the bug

When invoking IBrowserFile.RequestImageFileAsync, a file/blob object URL is created for the resize operation:

originalFileImage.src = URL.createObjectURL(originalFile['blob']);

But this objectURL is never revoked (with URL.revokeObjectURL()) after the resize has completed, leading to the objectURL and consequently the blob (original image file reference in this case) not being released from memory until the tab is reloaded or closed.

createObjectURL Usage Notes (Mozilla)

To Reproduce

  1. Run the sample to resize images.
<InputFile OnChange="OnInputFileChange" multiple/>

<div class="image-list">
    @foreach (var imageDataUrl in imageDataUrls)
    {
        <img src="@imageDataUrl" />
    }
</div>

@code {
    IList<string> imageDataUrls = new List<string>();

    async Task OnInputFileChange(InputFileChangeEventArgs e)
    {
        var imageFiles = e.GetMultipleFiles().Where(file => file.ContentType.StartsWith("image/"));

        var format = "image/png";
        foreach (var imageFile in imageFiles)
        {
            var resizedImageFile = await imageFile.RequestImageFileAsync(format, 100, 100);
            var buffer = new byte[resizedImageFile.Size];
            await resizedImageFile.OpenReadStream().ReadAsync(buffer);
            var imageDataUrl = $"data:{format};base64,{Convert.ToBase64String(buffer)}";
            imageDataUrls.Add(imageDataUrl);
        }
    }
}
  1. Inspect the page, and find the ever growing list of blob URLs in the sources tab.

Further technical details

  • ASP.NET 5.0
@MichelJansson
Copy link
Author

@MichelJansson MichelJansson commented Aug 10, 2021

I'm willing to submit a PR for this issue as my first-time contribution, as it's a 1 line fix.

@TanayParikh
Copy link
Contributor

@TanayParikh TanayParikh commented Aug 17, 2021

I'm willing to submit a PR for this issue as my first-time contribution, as it's a 1 line fix.

Thanks @MichelJansson!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment