Uploading via InputFile is much slower on Android

[MarvinKlein1508]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

When uploading large files with the InputFile component then there is a significant difference in uploading speed compared to iOS.

You can use this file for reference: https://f.marvinkleinmusic.de/Kaffeeklatsch.jpg

Uploading via Android:

android.mp4

Uploading via iOS:

ios.mp4

The upload on iOS is happening almost instantly. Meanwhile Android takes up to a minute for the same file.

Expected Behavior

I expect both devices to upload the same image at almost the same speed.

Steps To Reproduce

1. Clone https://github.com/microsoft/fluentui-blazor
2. Open in Visual Studio
3. Navigate to examples->demo->FluentUI.Demo.Shared->Pages->Lab->IssueTester
4. Paste the code
5. Run the project and go to Incubation lab->IssueTester
6. Upload the provided image via Android (device and Android version doesn't seem to matter) and then via iOS

@if (_isLoading)
{
    <FluentProgressRing />
    <FluentButton @onclick="() => _isCancelled = true">Cancel</FluentButton>
    return;
}

<FluentInputFile AnchorId="MyUploadBuffer"
                 DragDropZoneVisible="false"
                 Mode="InputFileMode.Buffer"
                 Multiple="false"
                 MaximumFileSize="@(1000 * 1024 * 1024)"
                 Accept=".png, .jpg, .jpeg"
                 BufferSize="100000"
                 OnProgressChange="@OnProgressChangeAsync"
                 OnCompleted="@OnCompleted" />

<FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.End">
    @if (_image.Length > 0)
    {
        <FluentButton @onclick="() => _image = []">Delete image</FluentButton>
    }

    <FluentButton Appearance="Appearance.Accent" Id="MyUploadBuffer">
        Upload image
    </FluentButton>
</FluentStack>

<p>Size: @_image.Length</p>

@if (_image.Length > 0)
{
    <div class="uploaded-image">
        <img src="@($"data:image/png;base64,{Convert.ToBase64String(_image)}")" />
    </div>
}

<h4>Vanilla Blazor</h4>
<label style="background: red; padding: 1em;" for="form-logo">
    Upload
    <InputFile accept="image/png, image/gif, image/jpeg, image/jpg, image/webp;capture=camera" OnChange="UploadVanillaAsync" id="form-logo" style="display: none;" />
</label>

@if (Image2.Length > 0)
{
    <FluentButton @onclick="() => Image2 = []">Delete image</FluentButton>
}

@if (Image2.Length > 0)
{
    <div class="uploaded-image">
        <img src="@($"data:image/png;base64,{Convert.ToBase64String(Image2)}")" />
        <button type="button" class="btn btn-danger" @onclick="() => Image2 = []">Delete</button>
    </div>
}

@code {
    private readonly List<byte> _data = [];
    private bool _isLoading;
    private bool _isCancelled;
    private byte[] Image2 { get; set; } = [];
    private byte[] _image = [];

    private async Task OnProgressChangeAsync(FluentInputFileEventArgs file)
    {
        _isLoading = true;
        file.IsCancelled = _isCancelled;

        if (!_isCancelled)
        {
            var data = MemoryExtensions.AsMemory<byte>(file.Buffer.Data, 0, file.Buffer.BytesRead);
            _data.AddRange(data.ToArray());
        }
        else
        {
            _data.Clear();
            _isLoading = false;
            _isCancelled = false;
        }
    }

    private void OnCompleted(IEnumerable<FluentInputFileEventArgs> files)
    {
        _image = _data.ToArray();
        _data.Clear();
        _isLoading = false;
    }

    private async Task UploadVanillaAsync(InputFileChangeEventArgs e)
    {
        await using MemoryStream fs = new();
        await e.File.OpenReadStream(e.File.Size).CopyToAsync(fs);

        Image2 = fs.ToArray();
    }
}

Exceptions (if any)

No response

.NET Version

10.0.100

Anything else?

The example code also contains a version for FluentInputFile which is just a wrapper around the InputFile component. See microsoft/fluentui-blazor#2773 for more details and trace files.

[ilonatommy]

@MarvinKlein1508, thank you for your report.

The difference can be caused by multiple factors. Could you, please measure the difference using pure InputFile?
Could you also add more details about the OSs used: version, device specs, including memory size, vendor etc? Is it a real device or emulator?

[MarvinKlein1508]

@ilonatommy both videos are using the pure InputFile implementation.

You can shrink it down to vanilla Blazor with this ready to run code:

<h4>Vanilla Blazor</h4>
<label style="background: red; padding: 1em;" for="form-logo">
    Upload
    <InputFile accept="image/png, image/gif, image/jpeg, image/jpg, image/webp;capture=camera" OnChange="UploadVanillaAsync" id="form-logo" style="display: none;" />
</label>

@if (Image2.Length > 0)
{
    <button type="button" @onclick="() => Image2 = []">Delete image</button>
}

@if (Image2.Length > 0)
{
    <div class="uploaded-image">
        <img src="@($"data:image/png;base64,{Convert.ToBase64String(Image2)}")" />
        <button type="button" class="btn btn-danger" @onclick="() => Image2 = []">Delete</button>
    </div>
}

@code {
    private byte[] Image2 { get; set; } = [];

    private async Task UploadVanillaAsync(InputFileChangeEventArgs e)
    {
        await using MemoryStream fs = new();
        await e.File.OpenReadStream(e.File.Size).CopyToAsync(fs);

        Image2 = fs.ToArray();
    }
}

Both devices are real phones. The OS version doesn't seem to matter. You should be able to reproduce the results using an emulator as well.

The video using iOS is running on an iPhone 17 Pro Max with iOS 26.1 and the other device is just a regular Android phone with latest Android version. But this doesn't matter. You can reproduce this using any other Android phone. We could also replicate it with a Samsung Galaxy S22.

[javiercn]

@MarvinKlein1508 thanks for the additional details.

Is it correct that this happens with Blazor Server?

It's unclear what might be causing this, but it seems at the very least browser specific.

[MarvinKlein1508]

Hi @javiercn it doesn't matter. You get the same result in both Blazor Server and WebAssembly