Multiple components

Explanation

You can use multiple components simultaneously on a page.

To upload files at all components with a single transfer command, you can start uploading one component at a time using the upload function, and then when the onDX5UploadCompleted event occurs, you can upload it sequentially by calling the upload function of the next component. But in addition to this, there is a way to collect files to be uploaded and upload them at once.

<!-- Defining the container that holds the two components -->
<div id="dext5-container-a" style="width:500px; height:200px;"></div>
<div id="dext5-container-b" style="width:500px; height:200px;"></div>
<!-- Defining the container that holds the component responsible for the actual upload -->
<!-- The uploader is defined as a 1px container so that it can not be seen easily. -->
<div id="dext5-container-uploader" style="width:1px; height:1px;"></div>

Define the component.

dx5.create({ id: "dext5-a", parentId: "dext5-container-a", btnFile: "btn-add-files-to-a" });
dx5.create({ id: "dext5-b", parentId: "dext5-container-b", btnFile: "btn-add-files-to-b" });
dx5.create({ id: "dext5-uploader", parentId: "dext5-container-uploader" });

When uploading a file, it obtains items to be uploaded from the two components, registers them in the uploader(dext5-uploader), and the uploader tries to upload.

var uploader = dx5.get("dext5-uploader");
			
uploader.clearItems();
// Get the file items to upload from the first component.
uploader.setUploableFilesFrom(dx5.get("dext5-a"));
// Get the file items to upload from the second component.
uploader.setUploableFilesFrom(dx5.get("dext5-b"));
uploader.setUploadURL("upload path");
uploader.upload("AUTO");

On the server, you can use the DEXTUploadX5_ControlId form name to identify which component the uploaded file belongs to.

var files = dext.GetFileElements("DEXTUploadX5_FileData");
// The component ID can be obtained from the "DEXTUploadX5_ControlId" form name.
var cids = dext.GetStringElements("DEXTUploadX5_ControlId");
// The item ID can be obtained from the "DEXTUploadX5_UniqueId" form name.
var uids = dext.GetStringElements("DEXTUploadX5_UniqueId");

var list = files
    .Zip(cids, (first, second) => new { File = first, ControlId = second })
    .Zip(uids, (first, second) => new { File = first.File, ControlId = first.ControlId, UniqueId = second });

foreach (var pair in list)
{
    if (!pair.File.IsEmpty)
    {
        pair.File.Save();
        ...
    }
}

Example

File upload A area (ID: dext5-a)

Add files

File upload B area (ID: dext5-b)

Add files

Upload