www.dextsolution.com
DEXTUPLOAD
X5
リファレンス > component

## addLocalFile

- 3.9.0.0以上

- 説明

  addLocalFile を使用すると、ファイルオブジェクトをコンポーネントとしてコードに直接登録することができます。

  addLocalFile は非同期で動作し、引数値として使用できるオブジェクトは以下のいずれかの型である必要があります： ファイル、ブロブ。

      # Tag
      <p><input type="file" id="source-file"/></p>

      # Script
      var dx = dx5.get("dext5");
      var list = document.querySelector("#source-file").files;
      if (list.length > 0) {
          dx.addLocalFile(list[0]);
      }

  Blobオブジェクトを使用して登録する場合は、Blobオブジェクトのnameプロパティを明示的に設定する必要があります。

      # Script
      var dx = dx5.get("dext5");
      var blob = new Blob(["This is text data."], { type: "text/plain" });
      blob.name = "sample.txt";
      dx.addLocalFile(blob);

- 形式

      component.addLocalFile(file);

- パラメータ

  名前 | 形式 | 説明
  --- | --- | ---
  file | File, Blob | ファイル ファイル、ブロブ

## addLocalFileList

- 3.7.0.0以上

- 説明

  addLocalFileListを使用すると、コード内のコンポーネントに直接ファイルのリストを登録することができます。

  addLocalFileListを使用して登録できるオブジェクトは、以下のいずれかの型である必要があります： FileList, DataTransfer, DataTransferItemList のいずれかである必要があります。

      // id 'drag-area'を持つHTML要素がドラッグアンドドロップエリアである場合、
      var dndArea = document.querySelector("#drag-area");

      dndArea.addEventListener("dragover", function (event) {
          event.preventDefault();
          event.dataTransfer.dropEffect = "copy";
      }, false);

      dndArea.addEventListener("drop", function (event) {
          event.preventDefault();
          // id「dext5」を持つコンポーネントをドロップイベントで手動登録するコード
          dx5.get("dext5").addLocalFileList(event.dataTransfer);
      }, false);

- 形式

      component.addLocalFileList(obj);

- パラメータ

  名前 | 形式 | 説明
  --- | --- | ---
  obj | FileList, DataTransfer, DataTransferItemList | 登録するファイルのリストを保持するオブジェクトです。

## copyItems

- 3.9.0.0以上

- 説明

  copyItemsメソッドは、コンポーネント間でアイテムをコピーするためのメソッドです。

  copyItems の第一引数値にアイテム ID 要素を持つ配列を設定すると、ローカルファイルか仮想ファイルかを区別することなくアイテムをコピーしてコピー先に渡し、非同期で動作します。

      // コンポーネント A からコンポーネント B にすべてのアイテムをコピーする例
      var dxA = dx5.get("A");
      var dxB = dx5.get("B");
      var targets = dxA.getItemIds();
      // targets: ['DX5-NUM-1', 'DX5-NUM-2', 'DX5-NUM-3', ...]
      dxA.copyItems(targets, dxB, function (copied) {
          console.log("Copied!");
      });

  コールバック関数を使うと、コピー前のアイテムのIDとコピー後のIDを比較することができます。

      dxA.copyItems(targets, dxB, console.log);
      # このような出力例が得られるはずです。
      [
          { "before": "DX5-1709096638301-1", "after": "DX5-1709096640677-1" },
          { "before": "DX5-1709096639314-2", "after": "DX5-1709096640735-2" },
          { "before": "DX5-1709096639371-3", "after": "DX5-1709096640796-3" },
          { "before": "DX5-1709096639425-4", "after": "DX5-1709096640854-4" }
      ]

  注意事項

  - コピーされるアイテムがローカルファイルの場合、コピーされるアイテムも同じローカルファイルを指します。
  - アイテムの checked プロパティと lock プロパティもコピーされます。
  - アイテムの id 属性、controlId 属性、status 属性はコピーされません。

- 形式

      component.copyItems(list, anotherComponent, cbCopied);

- パラメータ

  名前 | 形式 | 説明
  --- | --- | ---
  list | Array<String> | コピーする項目の ID を要素とする配列。
  anotherComponent | DX5MultiModule | コピーされたアイテムを登録する対象のコンポーネント
  cbCopied (option) | Function | コピー操作が完了したときに呼び出されるコールバック関数。copied パラメータは、コピー前のアイテムの ID とコピー後の ID を対にしたオブジェクトの配列です。

## moveItems

- 3.9.0.0以上

- 説明

  moveItems メソッドは、コンポーネント間のアイテムの移動に使用します。

  moveItemsの第一引数にアイテムIDの要素を持つ配列を設定すると、ローカルファイルか仮想ファイルかを区別することなく、ターゲットがアイテムを移動し、非同期で動作します。

      // コンポーネント A からコンポーネント B にすべてのアイテムを移動する例
      var dxA = dx5.get("A");
      var dxB = dx5.get("B");
      var targets = dxA.getItemIds();
      // targets: ['DX5-NUM-1', 'DX5-NUM-2', 'DX5-NUM-3', ...]
      dxA.moveItems(targets, dxB, function (moved) {
          console.log("Moved!");
      });

  コールバック関数を使えば、移動前のアイテムのIDと移動後のIDを比較することができる。

      dxA.moveItems(targets, dxB, console.log);
      # このような出力例が得られるはずです。
      [
          { "before": "DX5-1709096638301-1", "after": "DX5-1709096640677-1" },
          { "before": "DX5-1709096639314-2", "after": "DX5-1709096640735-2" },
          { "before": "DX5-1709096639371-3", "after": "DX5-1709096640796-3" },
          { "before": "DX5-1709096639425-4", "after": "DX5-1709096640854-4" }
      ]

  注意事項

  - アイテムのcheckedプロパティとlockプロパティも保持されます。
  - アイテムのid、controlId、status属性は保持されません。

- 形式

      component.copyItems(list, anotherComponent, cbCopied);

- パラメータ

  名前 | 形式 | 説明
  --- | --- | ---
  list | Array<String> | 移動するアイテムのIDを要素とする配列
  anotherComponent | DX5MultiModule | 移動したアイテムを登録する対象のコンポーネント
  cbMoved (option) | Function | 移動操作が完了したときに呼び出されるコールバック関数。moved パラメータは、移動前のアイテムの ID と移動後の ID を対にしたオブジェクトの配列です。