www.dextsolution.com
DEXTUPLOAD
X5
Reference > component

## addLocalFile

- Version 3.9.0.0 or later

- Explanation

  You can use addLocalFile to register a file object directly in your code as a component.

  addLocalFile works asynchronously, and the object that can be used as an argument value must be of one of the following types: File, Blob.

      # 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]);
      }

  If you want to use a Blob object to register, you need to explicitly set the name property of the Blob object.

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

- Uses

      component.addLocalFile(file);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  file | File, Blob | A file object

## addLocalFileList

- Version 3.7.0.0 or later

- Explanation

  You can use addLocalFileList to register a list of files directly into a component in your code.

  The object that can be registered using addLocalFileList must be one of the following types: FileList, DataTransfer, DataTransferItemList.

      // When the HTML element with the id 'drag-area' is a drag-and-drop area,
      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();
          // Code to manually register the component with the id 'dext5' on the drop event
          dx5.get("dext5").addLocalFileList(event.dataTransfer);
      }, false);

- Uses

      component.addLocalFileList(obj);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  obj | FileList, DataTransfer, DataTransferItemList | The object that holds the list of files to be registered.

## copyItems

- Version 3.9.0.0 or later

- Explanation

  The copyItems method is used to copy items between components.

  If you set an array with item id elements as the first argument value of copyItems, it will copy and pass the items to the destination without distinguishing between local or virtual files, and it works asynchronously.

      // Example of copying all items from Component A to Component 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!");
      });

  Using the callback function, we can compare the IDs of the items before copying with the IDs after copying.

      dxA.copyItems(targets, dxB, console.log);
      # You should get an example output like this.
      [
          { "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" }
      ]

  Notes

  - If the item to be copied is a local file, the copied item will also point to the same local file.
  - The item's checked and lock properties are also copied.
  - The id, controlId, and status attributes of the item are not copied.

- Uses

      component.copyItems(list, anotherComponent, cbCopied);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  list | Array<String> | An array with the IDs of the items to copy as elements
  anotherComponent | DX5MultiModule | The target component to register the copied items with
  cbCopied (option) | Function | A callback function that is called when the copy operation is complete. The copied parameter is an array of objects that pairs the ID of the item before it was copied with the ID after it was copied.

## moveItems

- Version 3.9.0.0 or later

- Explanation

  The moveItems method is used to move items between components.

  If you set an array with item id elements as the first argument to moveItems, the target will move the items without distinguishing between local or virtual files, and it will work asynchronously.

      // Example of moving all items from Component A to Component 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!");
      });

  Using the callback function, we can compare the IDs of the items before the move with the IDs after the move.

      dxA.moveItems(targets, dxB, console.log);
      # You should get an example output like this.
      [
          { "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" }
      ]

  Notes

  - The item's checked and lock properties are also preserved.
  - The item's id, controlId, and status attributes are not preserved.

- Uses

      component.moveItems(list, anotherComponent, cbMoved);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  list | Array<String> | An array with the IDs of the items to move as elements
  anotherComponent | DX5MultiModule | The target component to register the moved items with
  cbMoved (option) | Function | A callback function that is called when the move operation is complete, where the moved parameter is an array of objects that pairs the ID of the item before it was moved with the ID after it was moved.