dotnet / dotnet/aspnetcore

Uploading via InputFile is much slower on Android

Open
#64,706 4 comments 0 reactions 0 assignees View on GitHub
area-blazor investigate
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 10h
Merged PRs (30d)
281

Description

### Is there an existing issue for this?

- [x] 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:

https://github.com/user-attachments/assets/dcd9d633-7179-4c01-ac31-3c72106d3dfa

Uploading via iOS:

https://github.com/user-attachments/assets/cca931ec-9664-4c8a-85b1-b9f81504461a

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

```razor
@if (_isLoading)
{

Cancel
return;
}

@if (_image.Length > 0)
{
Delete image
}


Upload image

Size: @_image.Length

@if (_image.Length > 0)
{




}

Vanilla Blazor

Upload

@if (Image2.Length > 0)
{
Delete image
}

@if (Image2.Length > 0)
{



Delete

}

@code {
private readonly List _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(file.Buffer.Data, 0, file.Buffer.BytesRead);
_data.AddRange(data.ToArray());
}
else
{
_data.Clear();
_isLoading = false;
_isCancelled = false;
}
}

private void OnCompleted(IEnumerable 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 https://github.com/microsoft/fluentui-blazor/issues/2773 for more details and trace files.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.