Browser crash on iOS for client site image resizing with large number of files- Blazor Web Assembly (RequestImageFileAsync)

During testing desktop pcs with a large amount of memory work well. However on systems with a low amount of memory the browser will crash.

On my iPad Air (4th generation iOS version 14.5) I can resize about 400 pictures but after that point it will crash the browser. I setup a demo site to demonstrate the issue: https://blazorimageresize.azurewebsites.net

Here is a recording of the browser crash on the iOS device: https://drive.google.com/file/d/1WR7ykyR7Q0tYb0D5umrj2J6odTvRsPCa/view?usp=sharing

async Task OnInputFileChange(InputFileChangeEventArgs e)
        {
        var imageFiles = e.GetMultipleFiles(2000);

        var format = "image/jpg";
        foreach (var imageFile in imageFiles)
        {
            var resizedImageFile = await imageFile.RequestImageFileAsync(format, 1920, 1080);          
        }

[javiercn]

Thanks @lewing, we’ll take a look.

[MichelJansson]

Looks like this is a dupe of #35156

@mkArtakMSFT I have been studying InputFile quite a bit over the last few days, and while these are similar, #35156 is probably not the only reason for this crash.

#35156 is about the ObjectURL of the source file, and since that is a JS File object (from the File API) it should only hold a reference to the file in local file system (unless iOS is doing it differently…).

Though what I think is happening here is what @pavelsavara touched on, the result of the resize is stored as a blob on the input element to later be accessed via the IBlazorFile.OpenReadStream. This will probably quickly consume quite a bit of memory. Chromium docs also warns about creating large blobs too fast.

A solution to this issue could be to stream the resize results directly into .NET via a IJSStreamReference (6.0 preview 7) instead of a “faked” BrowserFile. This way it can be read directly, and when IJSStreamReference is disposed, it should also release the blob on the JS side. This of course requires a change of the public API…