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

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

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

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