[SOLVED] Event On Blazor Button


This Content is from Stack Overflow. Question asked by Gleydson

everything fine?
i’m learning about blazor and c# and i was wondering, how do i leave the button disabled when file type input is null? That is, it will be active when it has files in it.

This is my @page code

@page "/VerificarConta"

Verificar conta

Documento de identificação

Selfie com documento de identificação

Comprovante de residência (3 ultimos)

Comprovante de capacidade financeira

Enviar Documentos

@code {



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 "/"


<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 class="mb-3">
        <label for="Selfie">Selfie com documento de identificação</label>
        <input class="form-control" type="file" id="Selfie" required />
    <div class="mb-3">
        <label for="Endereco">Comprovante de residência (3 ultimos)</label>
        <input class="form-control" type="file" id="Endereco" required>
    <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>
    <button class="btn btn-primary" disabled="@(_lockButton)" type="submit">Enviar Documentos</button>


    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.

people found this article helpful. What about you?