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"
<h1>Verificar conta</h1>
<form enctype="multipart/form-data">
<div >
<label for="Identificacao" >Documento de identificação</label>
<input type="file" id="Identificacao" required/>
</div>
<div >
<label for="Selfie">Selfie com documento de identificação</label>
<input type="file" id="Selfie" required />
</div>
<div >
<label for="Endereco">Comprovante de residência (3 ultimos)</label>
<input type="file" id="Endereco" required>
</div>
<div >
<label for="Renda">Comprovante de capacidade financeira</label>
<input type="file" id="Renda" required>
<InputFile OnChange="@ArquivoSelecionado"></InputFile>
</div>
<button type="submit">Enviar Documentos</button>
</form>
@code {
}
CodePudding user response:
You would have to use javascript to watch for the input class to change, and then enable to submit button to be clicked.
See following: https://jsfiddle.net/ktvzsa8n/
HTML
<input id="submit" name="submit" type="submit" value="send" disabled="disabled">
<input id="file_submit" name="file_submit" type="file" value="" onchange="EnableSend();">
Javascript:
function EnableSend() {
document.getElementById("submit").disabled = false;
}
CodePudding user response:
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 enctype="multipart/form-data">
<div >
<label for="Identificacao" >Documento de identificação</label>
<input type="file" id="Identificacao" required/>
</div>
<div >
<label for="Selfie">Selfie com documento de identificação</label>
<input type="file" id="Selfie" required />
</div>
<div >
<label for="Endereco">Comprovante de residência (3 ultimos)</label>
<input type="file" id="Endereco" required>
</div>
<div >
<label for="Renda">Comprovante de capacidade financeira</label>
<input type="file" id="Renda" required>
<InputFile OnChange="@InputFileOnChange"></InputFile>
</div>
<button 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.