Web Components File Input (ファイル入力) の概要

Ignite UI for Web Components File Input コンポーネントは、ユーザーがファイルを選択・アップロードできるインタラクティブな方法を提供します。ファイルの選択、選択したファイル名の表示、複数のファイルのアップロードのサポートなど、ファイル固有の機能を追加することで、基本の IgcInputComponent 機能を拡張します。

Web Components File Input の例

import { defineComponents, IgcFileInputComponent, IgcInputComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcInputComponent, IgcFileInputComponent);
export class FileInputOverview {
  constructor() {
  }
}

new FileInputOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>File Input Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-file-input label="File input"></igc-file-input>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

IgcFileInputComponent コンポーネントを使用すると、ユーザーはデバイスからファイルを選択し、Web アプリケーションにアップロードできます。選択されたファイルの名前が表示され、「Browse」ボタンと「No file chosen」というテキストのカスタマイズオプションが提供されます。このコンポーネントには、ニーズに合わせて動作をさらに構成するために使用できるプロパティ、メソッド、スロットも用意されています。

作業の開始

IgcFileInputComponent コンポーネントの使用を開始するには、最初に次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。

npm install igniteui-webcomponents
cmd

その後、次のように IgcFileInputComponent をインポートする必要があります。

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

defineComponents(IgcFileInputComponent);
ts

これで、Web Components IgcFileInputComponent の基本構成から始めることができます。

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

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

構成

プロパティ

IgcFileInputComponent コンポーネントには、特定の要件に基づいて動作を構成できるさまざまなプロパティが用意されています。これらのプロパティを使用すると、入力の機能、外観、検証を制御できます。

value - ファイル入力フィールドの現在の値を設定します。
disabled - ファイル入力を無効にして、ユーザーによる操作を防止します。
required - 入力を必須としてマークします。ファイルが選択されない限り、フォームの送信はブロックされます。
invalid - 入力値が無効であることを示し、視覚的なエラー状態をトリガーするために使用されます。
multiple - 複数のファイルを選択できます。
accept - 選択できるファイルタイプを定義します。このプロパティの値は、ファイル形式のコンマ区切りのリストである必要があります (例: .jpg, .png, .gif)。
autofocus - ページが読み込まれると、ファイル入力フィールドに自動的にフォーカスを当てます。
label - ファイル入力要素に関連付けられたラベルテキストを設定します。
placeholder - ファイルが選択されていない場合に表示されるプレースホルダーテキストを提供します。

<igc-file-input 
  label="Files Input" 
  accept=".jpg, .png, .gif"
  placeholder="Files missing"
  required
  multiple>
</igc-file-input>
html

メソッド

構成可能なプロパティに加えて、IgcInputComponent コンポーネントから継承された IgcFileInputComponent コンポーネントで使用できる 4 つの便利なメソッドがあります。

focus - ファイル入力要素にフォーカスを設定します。
blur - ファイル入力要素からフォーカスを削除します。
reportValidity - 入力の有効性をチェックし、入力が無効な場合は検証メッセージを表示します。
setCustomValidity - カスタム検証メッセージを設定します。提供されたメッセージが空でない場合、入力は無効 (invalid) としてマークされます。

スロット

IgcFileInputComponent コンポーネントは、外観と動作をカスタマイズするために使用できるいくつかのスロットも公開します。

prefix と suffix - メイン入力エリアの前後にコンテンツを挿入できます。
helper-text - 入力の下にヒントまたは説明メッセージを表示します。書式設定のヒントやフィールドの要件など、追加のガイダンスを提供するのに役立ちます。
file-selector-text - ファイル選択ボタンに表示されるテキストをカスタマイズできます。
file-missing-text - ファイルが選択されていない場合に入力フィールドに表示されるテキストを設定します。
value-missing - 必須フィールドの検証に失敗した場合 (ファイルが必要なが提供されていない場合) にカスタムコンテンツをレンダリングします。
invalid – 入力が無効な状態の場合にカスタムコンテンツをレンダリングできます。
custom-error - setCustomValidity() メソッドを使用してカスタム検証メッセージが設定されている場合にコンテンツを表示します。

import { defineComponents, IgcIconComponent, IgcFileInputComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcIconComponent, IgcFileInputComponent);
const uploadIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M440-200h80v-167l64 64 56-57-160-160-160 160 57 56 63-63v167ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>';

const imageIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>'

export class FileInputPrefixSuffix {
  constructor() {
    registerIconFromText("uploadFile", uploadIcon);
    registerIconFromText("imageIcon", imageIcon);
  }
}

new FileInputPrefixSuffix();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>File Input Prefix & Suffix</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-file-input label="Input with slots">
          <igc-icon name="imageIcon" slot="prefix"></igc-icon>
          <igc-icon name="uploadFile" slot="suffix"></igc-icon>
          <span slot="helper-text">Sample helper text.</span>
          <span slot="file-selector-text">Upload</span>
          <span slot="value-missing">Please upload file</span>
        </igc-file-input>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

統合

IgcFileInputComponent コンポーネントは、HTML フォーム要素とシームレスに統合されます。上記のメソッドとプロパティを使用すると、標準の HTML フォーム内での動作と検証を効果的に管理できます。

import { defineComponents, IgcFileInputComponent, IgcInputComponent, IgcDialogComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './index.css'

defineComponents(IgcInputComponent, IgcFileInputComponent, IgcDialogComponent);
export class FileInputForm {
  constructor() {

    window.onload = function () {
      document.getElementById("fInput")?.focus();
    }

    document.getElementById('form1')?.addEventListener('submit', (event: SubmitEvent) => {
      event.preventDefault();
      showDialog(event.target as HTMLFormElement);
    })

    function showDialog(data: HTMLFormElement) {
      var filePath = data.fInput.value
      const dialog = document.createElement('igc-dialog');
      dialog.title = 'Form submission result';
      dialog.addEventListener('igcClosed', () => dialog.remove());

      const dump = document.createElement('pre');
      dump.textContent = filePath.replace("C:\\fakepath\\", "");

      dialog.appendChild(dump);
      document.body.appendChild(dialog);

      dialog.show();
    }
  }
}

new FileInputForm();
ts

<!DOCTYPE html>
<html>
  <head>
  <title>File Input in Form</title>
  <meta charset="UTF-8" />
  
  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
  <div id="root">
    <div class="container sample center">
      <form id='form1' enctype="multipart/form-data">
        <fieldset>
          <igc-file-input id="fInput" name="fInput" label="Required field" multiple required>
            <p slot="helper-text">You can upload any type of file.</p>
            <p slot="value-missing">You must upload a file</p>
          </igc-file-input>
          <igc-button variant="outlined" type="submit">Submit</igc-button>
          <igc-button variant="outlined" type="reset">Reset</igc-button>
        </fieldset>
      </form>
    </div>
  </div>
  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

igc-button {
  margin-top: 10px;
}css

制限

IgcFileInputComponent コンポーネントには現在次の制限があります。

「Browse」ボタンと「No file chosen」メッセージのデフォルトの文字列は、自動的にローカライズされません。これらの文字列はすべてのロケールで同じままですが、適切なスロットまたはプレースホルダーバインディングを使用して手動でカスタマイズできます。
ファイルは、value プロパティを通じて手動で設定することはできません。ファイルの選択はファイルピッカー経由でのみ行うことができます。ただし、空の文字列 '' を渡してフィールドをリセットすることはできます。

アクセシビリティと ARIA サポート

IgcFileInputComponent コンポーネントはフォーカス可能かつインタラクティブであり、キーボードとスクリーンリーダーの完全なアクセシビリティを保証します。コンポーネントには label 属性を使用してラベルを付けることができます。この属性はネイティブの <label> 要素を活用して、意味的に正しくアクセス可能なラベルを提供します。

アクセシビリティのベストプラクティスをサポートするために、コンポーネントは関連する ARIA 属性も適用します。

aria-invalid - 入力が無効な状態の場合、「true」に設定します。
aria-describedby - 存在する場合はヘルパーテキスト要素に自動的にリンクされ、支援技術が追加情報をアナウンスできるようになります。

スタイル設定

IgcFileInputComponent コンポーネントは、スタイル設定に使用できる CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します。

名前	説明
`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

import { defineComponents, IgcFileInputComponent, IgcInputComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './FileInputStyling.css';

defineComponents(IgcFileInputComponent, IgcInputComponent);
const uploadIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>'

export class FileInputStyling {
  constructor() {
    registerIconFromText("uploadFile", uploadIcon);
  }
}

new FileInputStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>File Input Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-file-input label="Input styling">
          <igc-icon name="uploadFile" slot="suffix"></igc-icon>
        </igc-file-input>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-file-input {
    --blackground: var(--ig-primary-700);
    --foreground: var(--ig-primary-700-contrast);
}

igc-file-input:focus::part(suffix),
igc-file-input::part(file-selector-button),
igc-file-input::part(suffix) {
    /* Style the file selector button */
    --input-prefix-background: var(--blackground);
    --input-prefix-color: var(--foreground);

    /* Style the custom suffix */
    --input-suffix-background: var(--blackground);
    --input-suffix-background--focused: var(--blackground);
    --input-suffix-background--filled: var(--blackground);

    color: var(--foreground);
}

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

css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css