Visão geral da entrada de arquivo Web Components

    O componente Ignite UI for Web Components File Input oferece uma forma interativa para os usuários selecionarem e enviarem arquivos. Ele amplia a funcionalidade baseIgcInputComponent adicionando recursos específicos para arquivos, como seleção de arquivos, exibição de nomes selecionados e suporte a múltiplos uploads de arquivos.

    Web Components File Input Example

    Usage

    OIgcFileInputComponent componente permite que os usuários selecionem arquivos de seu dispositivo e os enviem para uma aplicação web. Ele exibe os nomes dos arquivos selecionados e oferece opções de personalização para o botão de pesquisa e o texto "Nenhum arquivo escolhido". O componente também fornece propriedades, métodos e slots que podem ser usados para configurar ainda mais seu comportamento de acordo com suas necessidades.

    Começando

    Para começar a usar,IgcFileInputComponent primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    Depois disso, você precisa importar oIgcFileInputComponent seguinte:

    import { defineComponents, IgcFileInputComponent } from 'igniteui-webcomponents';

defineComponents(IgcFileInputComponent);

    Agora você pode começar com uma configuração básica do Web ComponentsIgcFileInputComponent.

    <igc-file-input label="File Input" required=true></igc-file-input>

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Comecando.

    Configuração

    Properties

    OIgcFileInputComponent componente oferece uma variedade de propriedades que permitem configurar seu comportamento com base em requisitos específicos. Essas propriedades lhe dão controle sobre a funcionalidade, aparência e validação da entrada.

    • value- Define o valor atual do campo de entrada do arquivo.
    • disabled- Desativa a entrada do arquivo, impedindo a interação do usuário.
    • required- Marca a entrada como obrigatória. O envio de formulários será bloqueado a menos que um arquivo seja selecionado.
    • invalid- Indica que o valor de entrada é inválido, usado para acionar estados de erro visual.
    • multiple- Permite a seleção de múltiplos arquivos.
    • accept- Define os tipos de arquivos que podem ser selecionados. O valor dessa propriedade precisa ser uma lista separada por vírgulas de formatos de arquivo (por exemplo, .jpg, .png, .gif).
    • autofocus- Foca automaticamente o campo de entrada do arquivo quando a página carrega.
    • label- Define o texto do rótulo associado ao elemento de entrada do arquivo.
    • placeholder- Fornece texto provisório exibido quando nenhum arquivo é selecionado.
    <igc-file-input
  label="Files Input"
  accept=".jpg, .png, .gif"
  placeholder="Files missing"
  required
  multiple>
</igc-file-input>

    Methods

    Além de suas propriedades configuráveis, existem quatro métodos úteis herdados doIgcInputComponent componente que você pode usar noIgcFileInputComponent componente:

    • focus- Define o foco no elemento de entrada do arquivo.
    • blur- Remove o foco do elemento de entrada do arquivo.
    • reportValidity- Verifica a validade da entrada e exibe uma mensagem de validação caso a entrada seja inválida.
    • setCustomValidity- Define uma mensagem de validação personalizada. Se a mensagem fornecida não estiver vazia, a entrada será marcada como inválida.

    Slots

    OIgcFileInputComponent componente também expõe vários slots que podem ser usados para personalizar sua aparência e comportamento.

    • prefix&suffix- Permitir inserir conteúdo antes ou depois da área principal de entrada.
    • helper-text- Exibe uma dica ou mensagem instrutiva abaixo da entrada. Útil para fornecer orientações adicionais, como dicas de formatação ou requisitos de campo.
    • file-selector-text- Permitir que você personalize o texto exibido no botão de seleção de arquivo.
    • file-missing-text- Define o texto mostrado no campo de entrada quando nenhum arquivo foi selecionado.
    • value-missing- Renderiza conteúdo personalizado quando a validação de campo exigida falha. (ou seja, quando um arquivo é exigido, mas não fornecido).
    • invalid– Permite renderizar conteúdo personalizado quando a entrada está em estado inválido.
    • custom-error- Exibe conteúdo quando uma mensagem de validação personalizada é definida usando osetCustomValidity() método.

    Integration

    OIgcFileInputComponent componente se integra perfeitamente ao elemento HTML Form. Usando os métodos e propriedades descritos acima, você pode gerenciar efetivamente seu comportamento e validação dentro dos formulários HTML padrão.

    Limitations

    Atualmente, oIgcFileInputComponent componente apresenta as seguintes limitações:

    • As strings padrão para o botão "Procurar" e a mensagem "Nenhum arquivo escolhido" não são localizadas automaticamente. Essas cadeias de caracteres permanecem as mesmas em todas as localidades, mas podem ser personalizadas manualmente usando os slots apropriados ou a associação de espaço reservado.
    • Arquivos não podem ser configurados manualmente pelavalue propriedade. A seleção de arquivos só pode ser feita via seletor de arquivos. No entanto, você pode passar uma string'' vazia para resetar o campo.

    Accessibility & ARIA Support

    OIgcFileInputComponent componente é tanto focalizável quanto interativo, garantindo acessibilidade total por teclado e leitor de tela. O componente pode ser rotulado usando olabel atributo, que utiliza o elemento nativo<label> para fornecer um rótulo semanticamente correto e acessível.

    Para oferecer suporte às práticas recomendadas de acessibilidade, o componente também aplica atributos ARIA relevantes:

    • aria-invalid- Definido como "verdadeiro" quando a entrada está em estado inválido.
    • aria-describedby- Vinculado automaticamente ao elemento de texto auxiliar quando presente, permitindo que tecnologias assistivas anunciem informações adicionais.

    Styling

    OIgcFileInputComponent componente expõe partes CSS que podemos usar para estilismo. A tabela a seguir lista todas as partes CSS expostas:

    Nome Descrição
    container O wrapper principal que contém todos os principais elementos de entrada.
    input O elemento de entrada nativo.
    label O elemento de rótulo nativo.
    file-names O wrapper de nomes de arquivo.
    file-selector-button O botão Procurar.
    prefix O wrapper de prefixo.
    suffix O wrapper de sufixo.
    helper-text O wrapper de texto auxiliar. 
    igc-file-input::part(file-names) {
  background-color: var(--ig-primary-50);
  color: var(--ig-gray-400);
}

igc-file-input::part(suffix) {
  color: var(--ig-primary-700-contrast);
  background-color: var(--ig-primary-700);
}

igc-file-input::part(label) {
  color: var(--ig-gray-600);
}

    API References

    Additional Resources