Blazor InputFile RequestImageFileAsync not revoking ObjectURL #35156
Description
Describe the bug
When invoking IBrowserFile.RequestImageFileAsync, a file/blob object URL is created for the resize operation:
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
- 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);
}
}
}- Inspect the page, and find the ever growing list of blob URLs in the sources tab.
Further technical details
- ASP.NET 5.0