Descripción general de la entrada de archivos de Web Components

    El componente de Entrada de Archivos Ignite UI for Web Components ofrece una forma interactiva para que los usuarios seleccionen y suban archivos. Extiende la funcionalidad baseIgcInputComponent añadiendo funciones específicas de archivo, como la selección de archivos, mostrar nombres de archivos seleccionados y soportar múltiples cargas de archivos.

    Web Components File Input Example

    Usage

    ElIgcFileInputComponent componente permite a los usuarios seleccionar archivos de su dispositivo y subirlos a una aplicación web. Muestra los nombres de los archivos seleccionados y ofrece opciones de personalización para el botón de navegar y el texto "No se elige archivo". El componente también proporciona propiedades, métodos y ranuras que pueden usarse para configurar aún más su comportamiento según tus necesidades.

    Empezando

    Para empezar a usar elIgcFileInputComponent, primero, necesitas instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    Después de eso, necesitas importar loIgcFileInputComponent siguiente:

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

defineComponents(IgcFileInputComponent);

    Ahora puedes empezar con una configuración básica de la Web ComponentsIgcFileInputComponent.

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

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    Configuración

    Properties

    ElIgcFileInputComponent componente ofrece una variedad de propiedades que permiten configurar su comportamiento según requisitos específicos. Estas propiedades te dan control sobre la funcionalidad, apariencia y validación de la entrada.

    • value- Establece el valor actual del campo de entrada del archivo.
    • disabled- Desactiva la entrada del archivo, impidiendo la interacción del usuario.
    • required- Marca la entrada como obligatoria. La presentación de formularios será bloqueada a menos que se seleccione un archivo.
    • invalid- Indica que el valor de entrada es inválido, usado para activar estados de error visual.
    • multiple- Permite la selección de múltiples archivos.
    • accept- Define los tipos de archivos que pueden seleccionarse. El valor de esta propiedad debe ser una lista separada por comas de formatos de archivo (por ejemplo, .jpg, .png, .gif).
    • autofocus- Enfoca automáticamente el campo de entrada del archivo cuando carga la página.
    • label- Establece el texto de la etiqueta asociado al elemento de entrada del archivo.
    • placeholder- Proporciona texto marcador que se muestra cuando no se selecciona ningún archivo.
    <igc-file-input
  label="Files Input"
  accept=".jpg, .png, .gif"
  placeholder="Files missing"
  required
  multiple>
</igc-file-input>

    Methods

    Además de sus propiedades configurables, existen cuatro métodos útiles heredados delIgcInputComponent componente que puedes usar en elIgcFileInputComponent componente:

    • focus- Establece el foco en el elemento de entrada del archivo.
    • blur- Elimina el enfoque del elemento de entrada del archivo.
    • reportValidity- Verifica la validez de la entrada y muestra un mensaje de validación si la entrada no es válida.
    • setCustomValidity- Establece un mensaje de validación personalizado. Si el mensaje proporcionado no está vacío, la entrada se marcará como inválida.

    Slots

    ElIgcFileInputComponent componente también expone varios espacios que pueden usarse para personalizar su apariencia y comportamiento.

    • prefix&suffix- Permite insertar contenido antes o después del área principal de entrada.
    • helper-text- Muestra una pista o mensaje instruccional debajo de la entrada. Útil para proporcionar orientación adicional, como consejos de formato o requisitos de campo.
    • file-selector-text- Permitir personalizar el texto mostrado en el botón de selección de archivo.
    • file-missing-text- Establece el texto mostrado en el campo de entrada cuando no se ha seleccionado ningún archivo.
    • value-missing- Renderiza contenido personalizado cuando falla la validación del campo requerida. (es decir, cuando se requiere un archivo pero no se proporciona).
    • invalid– Permite renderizar contenido personalizado cuando la entrada está en estado inválido.
    • custom-error- Muestra el contenido cuando se establece un mensaje de validación personalizado usando elsetCustomValidity() método.

    Integration

    ElIgcFileInputComponent componente se integra perfectamente con el elemento HTML Form. Utilizando los métodos y propiedades descritos anteriormente, puedes gestionar eficazmente su comportamiento y validación dentro de los formularios HTML estándar.

    Limitations

    Actualmente, elIgcFileInputComponent componente presenta las siguientes limitaciones:

    • Las cadenas predeterminadas para el botón "Examinar" y el mensaje "No se ha elegido ningún archivo" no se localizan automáticamente. Estas cadenas siguen siendo las mismas en todas las configuraciones regionales, pero se pueden personalizar manualmente mediante las ranuras o el enlace de marcador de posición adecuados.
    • Los archivos no pueden configurarse manualmente a través de lavalue propiedad. La selección de archivos solo puede hacerse a través del selector de archivos. Sin embargo, puedes pasar una cadena'' vacía para reiniciar el campo.

    Accessibility & ARIA Support

    ElIgcFileInputComponent componente es tanto enfocable como interactivo, garantizando una accesibilidad completa con teclado y lector de pantalla. El componente puede etiquetarse usando ellabel atributo, que aprovecha el elemento nativo<label> para proporcionar una etiqueta semánticamente correcta y accesible.

    Para respaldar las mejores prácticas de accesibilidad, el componente también aplica atributos ARIA relevantes:

    • aria-invalid- Establecer en "verdadero" cuando la entrada está en estado inválido.
    • aria-describedby- Vinculado automáticamente al elemento de texto auxiliar cuando está presente, permitiendo que las tecnologías asistivas anuncien la información adicional.

    Styling

    ElIgcFileInputComponent componente expone partes CSS que podemos usar para estilizado. La siguiente tabla enumera todas las partes CSS expuestas:

    Nombre Descripción
    container El contenedor principal que contiene todos los elementos de entrada principales.
    input El elemento de entrada nativo.
    label El elemento de etiqueta nativo.
    file-names El contenedor de nombres de archivo.
    file-selector-button El botón Examinar.
    prefix El contenedor de prefijo.
    suffix El contenedor del sufijo.
    helper-text El contenedor 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