Web Components 파일 입력 개요

    Ignite UI for Web Components 파일 입력 구성 요소는 사용자가 파일을 선택하고 업로드할 수 있는 대화형 방법을 제공합니다. 파일 선택과 같은 파일별 기능을 추가하고, 선택한 파일 이름을 표시하고, 여러 파일 업로드를 지원하여 기본 IgcInputComponent 기능을 확장합니다.

    Web Components File Input Example

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Usage

    The IgcFileInputComponent component allows users to select files from their device and upload them to a web application. It displays the names of selected files and offers customization options for the browse button and the "No file chosen" text. The component also provides properties, methods, and slots that can be used to further configure its behavior to suit your needs.

    시작하기

    To start using the IgcFileInputComponent, first, you need to install the Ignite UI for Web Components by running the following command:

    npm install igniteui-webcomponents
cmd

    After that, you need to import the IgcFileInputComponent as follows:

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

defineComponents(IgcFileInputComponent);
ts

    Now you can start with a basic configuration of the Web Components IgcFileInputComponent.

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

    Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    Ignite UI for Web Components | CTA Banner

    구성

    Properties

    The IgcFileInputComponent component offers a variety of properties that allow you to configure its behavior based on specific requirements. These properties give you control over the input’s functionality, appearance, and validation.

    • value - Sets the current value of the file input field.
    • disabled - Disables the file input, preventing user interaction.
    • required - Marks the input as mandatory. Form submission will be blocked unless a file is selected.
    • invalid - Indicates that the input value is invalid, used to trigger visual error states.
    • multiple - Allows the selection of multiple files.
    • accept - Defines the types of files that can be selected. The value for this property needs to be a comma-separated list of file formats (e.g., .jpg, .png, .gif).
    • autofocus - Automatically focuses the file input field when the page loads.
    • label - Sets the label text associated with the file input element.
    • placeholder - Provides placeholder text displayed when no file is selected.
    <igc-file-input 
  label="Files Input" 
  accept=".jpg, .png, .gif"
  placeholder="Files missing"
  required
  multiple>
</igc-file-input>
html

    Methods

    In addition to its configurable properties, there are four useful methods inherited from the IgcInputComponent component that you can use in the IgcFileInputComponent component:

    • focus - Sets the focus on the file input element.
    • blur - Removes the focus from the file input element.
    • reportValidity - Checks the validity of the input and displays a validation message if the input is invalid.
    • setCustomValidity - Sets a custom validation message. If the provided message is not empty, the input will be marked as invalid.

    Slots

    The IgcFileInputComponent component also exposes several slots that can be used to customize its appearance and behavior.

    • prefix & suffix- 기본 입력 영역 앞이나 뒤에 콘텐츠를 삽입할 수 있습니다.
    • helper-text- 입력 아래에 힌트 또는 안내 메시지를 표시합니다. 서식 지정 팁 또는 필드 요구 사항과 같은 추가 지침을 제공하는 데 유용합니다.
    • file-selector-text- 파일 선택 버튼에 표시되는 텍스트를 사용자 지정할 수 있습니다.
    • file-missing-text- 파일을 선택하지 않은 경우 입력 필드에 표시되는 텍스트를 설정합니다.
    • value-missing- 필요한 필드 유효성 검사가 실패할 때 사용자 지정 콘텐츠를 렌더링합니다. (즉, 파일이 필요하지만 제공되지 않은 경우).
    • invalid– 입력이 유효하지 않은 상태일 때 사용자 지정 콘텐츠를 렌더링할 수 있습니다.
    • custom-error - Displays content when a custom validation message is set using the setCustomValidity() method.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Integration

    The IgcFileInputComponent component integrates seamlessly with the HTML Form element. Using the methods and properties described above, you can effectively manage its behavior and validation within the standard HTML Forms.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Limitations

    The IgcFileInputComponent component currently has the following limitations:

    • "찾아보기" 단추 및 "선택한 파일 없음" 메시지의 기본 문자열은 자동으로 지역화되지 않습니다. 이러한 문자열은 모든 로케일에서 동일하게 유지되지만 적절한 슬롯 또는 플레이스홀더 바인딩을 사용하여 수동으로 사용자 지정할 수 있습니다.
    • 속성을 통해 파일을 수동으로 설정할 수 없습니다 value. 파일 선택은 파일 선택기를 통해서만 수행할 수 있습니다. 그러나 빈 문자열을'' 전달하여 필드를 재설정할 수 있습니다.

    Accessibility & ARIA Support

    The IgcFileInputComponent component is both focusable and interactive, ensuring full keyboard and screen reader accessibility. The component can be labeled using the label attribute, which leverages the native <label> element to provide a semantically correct and accessible label.

    접근성 권장사항을 지원하기 위해 구성요소는 관련 ARIA 속성도 적용합니다.

    • aria-invalid- 입력이 잘못된 상태인 경우 "true"로 설정합니다.
    • aria-describedby- 도우미 텍스트 요소가 있는 경우 자동으로 연결되어 보조 기술이 추가 정보를 알릴 수 있습니다.

    Styling

    The IgcFileInputComponent component exposes CSS parts which we can use for styling. The following table lists all of the exposed CSS parts:

    이름 설명
    container 모든 기본 입력 요소를 보유하는 기본 래퍼입니다.
    input 기본 입력 요소입니다.
    label 기본 레이블 요소입니다.
    file-names 파일 이름 래퍼입니다.
    file-selector-button 찾아보기 단추입니다.
    prefix 접두사 래퍼.
    suffix 접미사 래퍼.
    helper-text 도우미 텍스트 래퍼입니다. 
    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);
}
scss

    EXAMPLE
    TS
    HTML
    FileInputStyling.css
    index.css
    Edit in:

    API References

    Additional Resources