InputFile maximum file amount in blazor

Question

InputFile maximum file amount in blazor

Anna Bogdanovna Bondarets 20

Hello, I implemented InputFile in blazor app to get multiple files in one go. However, when I upload more than 10 files I get the warning that you can see in the attached screenshot. I put private int maxAllowedFiles = 20; but it doesn't seem to affect the execution. Every time I get these warnings the app just freezes. I wanted to limit the upload of files by giving a warning, but it seems not to enter the method where I count the amount of uploaded files with int numberOfFilesUploaded = e.GetMultipleFiles().Count(); Could you please recommend a way to avoid this behavior? Is there a way to count the amount of files before it gets to the method?

User's image

Anna Bogdanovna Bondarets 20

I was asked to share my code, so I'm sharing the parts which are connected to the problem

<InputFile accept=".pdf" OnChange="@LoadFiles" multiple
                               class="absolute top-0 left-0 h-full w-full cursor-pointer opacity-0 " id="fileInput" />

private int maxAllowedFiles = 10;


    private async void LoadFiles(InputFileChangeEventArgs e)
    {
        int numberOfFilesUploaded = e.GetMultipleFiles().Count();
        Console.WriteLine(numberOfFilesUploaded);

        if (numberOfFilesUploaded > 10)
        {
            uploadFeedback?.Show(PopUpTypes.Warning, "You can't upload more than 10 files at once.");
            StateHasChanged();
            return;
        }
        
        isLoading = true;
        isLoadingButton = true;
        

        foreach (IBrowserFile file in e.GetMultipleFiles(maxAllowedFiles))
        {
            try
            {
                //Code for handle files
            }
            catch (Exception ex)
            {
                Logger.LogError("Error processing file {FileName}: {Error}", file.Name, ex.Message);
            }
       }

        isLoading = false;
        StateHasChanged();
    }

Accepted answer

1 additional answer

Your answer

Anna Bogdanovna Bondarets 20 Reputation points

2024-04-11T22:53:36.9533333+00:00

I was asked to share my code, so I'm sharing the parts which are connected to the problem

<InputFile accept=".pdf" OnChange="@LoadFiles" multiple class="absolute top-0 left-0 h-full w-full cursor-pointer opacity-0 " id="fileInput" /> private int maxAllowedFiles = 10; private async void LoadFiles(InputFileChangeEventArgs e) { int numberOfFilesUploaded = e.GetMultipleFiles().Count(); Console.WriteLine(numberOfFilesUploaded); if (numberOfFilesUploaded > 10) { uploadFeedback?.Show(PopUpTypes.Warning, "You can't upload more than 10 files at once."); StateHasChanged(); return; } isLoading = true; isLoadingButton = true; foreach (IBrowserFile file in e.GetMultipleFiles(maxAllowedFiles)) { try { //Code for handle files } catch (Exception ex) { Logger.LogError("Error processing file {FileName}: {Error}", file.Name, ex.Message); } } isLoading = false; StateHasChanged(); }

Answer 1

Hi @Anna Bogdanovna Bondarets,

I think you need check the source code of GetMultipleFiles:

public IReadOnlyList<IBrowserFile> GetMultipleFiles(int maximumFileCount = 10)
{
    if (_files.Count > maximumFileCount)
    {
        throw new InvalidOperationException($"The maximum number of files accepted is {maximumFileCount}, but {_files.Count} were supplied.");
    }
    return _files;
}

To achieve your requirement, you need change your code like below:

int numberOfFilesUploaded = e.GetMultipleFiles(maxAllowedFiles).Count();

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Rena

Answer 2

AgaveJoe 30,126

The Blazor documentation has an example of limiting the number of upload files.

https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-8.0#file-size-read-and-upload-limits

Anna Bogdanovna Bondarets 20 Reputation points

2024-04-11T21:29:16.2533333+00:00

I already use maxAllowedFiles, but still if the user uploads more than 10 files, there are these warnings in the console and it doesn't enter the OnChange method
AgaveJoe 30,126 Reputation points

2024-04-11T22:30:01.05+00:00

If you share your code then someone should be able to point out why the OnChange is not firing. You have to understand that without the code we can only guess what's wrong.
Anna Bogdanovna Bondarets 20 Reputation points

2024-04-11T22:54:03.86+00:00

Thank you, just shared the code

Share via

InputFile maximum file amount in blazor

1 additional answer

Your answer