How to insert an input type file with validation in a Blazor form (Editform)

Asked

Viewed 185 times

1

I’m following the official documentation ASP.NET Core Blazor Forms and Validation at this link Blazor form with validation and I realized that some inputs are missing, being these:

  • input type="email"
  • input type="file"
  • input type="image"
  • input type="email"

Having only these

  • Inputtext
  • Inputtextarea
  • Inputselect
  • Inputnumber
  • Inputcheckbox
  • Inputdate

How to use input input type="file" which is not in the core of Blazor ?

I have the following form that contains Inputtext, Inputselectnumber, but I need to insert an input type="image" or type="file" as I do this procedure ?

<EditForm Model="@veiculo" OnValidSubmit="@Inserir">
    <DataAnnotationsValidator />

    <div class="form-row">
        <div class="form-group col-md-4">
            <label>Tag</label>
            <InputText @bind-Value="@veiculo.Tag" class="form-control" />
            <ValidationMessage For="@(() => veiculo.Tag)" />
        </div>

        <div class="form-group col-md-4">
            <label>Motorista</label>
            <InputText @bind-Value="@veiculo.Motorista" class="form-control" />
            <ValidationMessage For="@(() => veiculo.Motorista)" />
        </div>

        <div class="form-group col-md-4">
            <label>Placa</label>
            <InputText @bind-Value="@veiculo.Placa" class="form-control" />
            <ValidationMessage For="@(() => veiculo.Placa)" />
        </div>
    </div>

    <div class="form-row">

        <div class="form-group col-md-6">
            <label>Empresa</label>
            <InputSelectNumber @bind-Value="veiculo.EmpresaId" class="form-control">
                <option value="0">-- ESCOLHA UMA EMPRESA --</option>
                @foreach (var item in empresas)
                {
                    <option value="@item.EmpresaId">@item.Nome</option>
                }
            </InputSelectNumber>
            <ValidationMessage For="@(()=>veiculo.EmpresaId)" />
        </div>

        <div class="form-group col-md-6">
            <label>Tipo</label>
            <InputSelectNumber @bind-Value="veiculo.TipoId" class="form-control">
                <option value="0">-- ESCOLHA UM TIPO --</option>
                @foreach (var item in tipos)
                {
                    <option value="@item.TipoId">@item.Nome</option>
                }
            </InputSelectNumber>
            <ValidationMessage For="@(()=>veiculo.EmpresaId)" />
        </div>

    </div>

    @if (mode == MODE.Inserir)
    {
        <button type="submit" class="btn btn-primary">Inserir</button>
    }
    else
    {
        <input type="hidden" @bind-value="@veiculo.VeiculoId" />
        <button @onclick="Atualizar" class="btn btn-primary">Atualizar</button>
        <button @onclick="Excluir" class="btn btn-danger">Excluir</button>
    }

</EditForm>

My Model is this

    [Key]
    [Display(Name = "Código")]
    public int VeiculoId { get; set; }

    [Display(Name = "Tag")]
    [Required(ErrorMessage = "O campo {0} é obrigatório.")]
    [StringLength(26, MinimumLength = 26, ErrorMessage = "O campo {0} deve ter no mínimo {2} e máximo {1}")]
    public string Tag { get; set; }

    [Display(Name = "Empresa")]
    [Required(ErrorMessage = "O campo {0} é obrigatório.")]
    [Range(1, int.MaxValue, ErrorMessage = "Preencha o campo {0} com valor maior que {1}.")]
    public int EmpresaId { get; set; }

    public Empresa Empresa { get; set; }

    [Display(Name = "Motorista")]
    [Required(ErrorMessage = "O campo {0} é obrigatório.")]
    [StringLength(100, MinimumLength = 2, ErrorMessage = "O campo {0} deve ter no mínimo {2} e máximo {1}")]
    public string Motorista { get; set; }

    [Display(Name = "Placa")]
    [Required(ErrorMessage = "O campo {0} é obrigatório.")]
    [StringLength(8, MinimumLength = 8, ErrorMessage = "O campo {0} deve ter no mínimo {2} e máximo {1}")]
    [RegularExpression(@"[A-Z]{3}-\d{4}")]
    public string Placa { get; set; }

    [Display(Name = "Tipo")]
    [Required(ErrorMessage = "O campo {0} é obrigatório.")]
    [Range(1, int.MaxValue, ErrorMessage = "Preencha o campo {0} com valor maior que {1}.")]
    public int TipoId { get; set; }

    public Tipo Tipo { get; set; }
  • 1

    example: https://www.mikesdotnetting.com/article/341/uploading-files-in-blazor

  • 1

    This "Issue" has relevant information: https://github.com/dotnet/aspnetcore/issues/12205.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.