Issue

This Content is from Stack Overflow. Question asked by Gleydson

@page "/VerificarConta"

Solution

Have a bool which represents the state of the button (disabled or enabled).
This bool should then be switched to true / false, whenever there is more than 1 file added when the @onchange event gets fired.

The code is as follows:

@page "/"

<PageTitle>Index</PageTitle>


<h1>Verificar conta</h1>
    
<form class="mt-5" enctype="multipart/form-data">
    
    <div class="mb-3">        
        <label for="Identificacao" class="px-1">Documento de identificação</label>
        <input class="form-control" type="file" id="Identificacao" required/>       
    </div>
    
    <div class="mb-3">
        <label for="Selfie">Selfie com documento de identificação</label>
        <input class="form-control" type="file" id="Selfie" required />
    </div>
    
    <div class="mb-3">
        <label for="Endereco">Comprovante de residência (3 ultimos)</label>
        <input class="form-control" type="file" id="Endereco" required>
    </div>
 
    <div class="mb-3">
        <label for="Renda">Comprovante de capacidade financeira</label>
        <input class="form-control" type="file" id="Renda" required>
        <InputFile OnChange="@InputFileOnChange"></InputFile>
    </div>
    
    <button class="btn btn-primary" disabled="@(_lockButton)" type="submit">Enviar Documentos</button>

</form>

@code{
    private bool _lockButton = true;

    private async Task InputFileOnChange(InputFileChangeEventArgs args) 
    {
        _lockButton = (args.FileCount > 0) ? false : true;
    }
}

The following code, does not contain any specific checks, only if more than 0 files were included. Other checks are up to you to include. Furthermore, only 1 input was validated, but it works as a proof of concept.

 This Question was asked in  StackOverflow by  Gleydson and Answered by IAmDrNoLIfe It is licensed under the terms of 
CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.