다중 컴포넌트 사용

설명

하나의 페이지에 여러 개 컴포넌트(멀티 컴포넌트)를 동시에 사용할 수 있다.

한 번의 전송 명령으로 모든 컴포넌트의 파일을 업로드하려면, 한 컴포넌트에서 upload 함수를 사용하여 업로드를 시작한 후, onDX5UploadCompleted 이벤트가 발생하면, 다음 컴포넌트의 upload 함수를 호출하는 방법을 사용하여 순차적으로 업로드를 할 수 있다.

그러나 이런 방법 외에, 업로드할 파일만 하나로 모아서 한 번에 업로드할 수 있는 방법이 있다.

<!-- 컴포넌트 2개를 담을 컨테이너를 정의한다. -->
<div id="dext5-container-a" style="width:500px; height:200px;"></div>
<div id="dext5-container-b" style="width:500px; height:200px;"></div>
<!-- 실제 업로드를 담당할 컴포넌트를 담을 컨테이너를 정의한다. -->
<!-- 업로더는 눈에 잘 보이지 않도록 1px의 컨테이너로 정의한다. -->
<div id="dext5-container-uploader" style="width:1px; height:1px;"></div>

컴포넌트를 정의한다.

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" });

파일을 업로드할 때, 두 컴포넌트로부터 업로드할 파일 항목을 얻어 dext5-uploader 컴포넌트에 등록을 하고, dext5-uploader 컴포넌트가 업로드를 시도한다.

var uploader = dx5.get("dext5-uploader");
			
uploader.clearItems();

// 첫 번째 컴포넌트로부터 업로드를 하기 위한 파일 정보를 얻는다.
uploader.setUploableFilesFrom(dx5.get("dext5-a"));
// 두 번째 컴포넌트로부터 업로드를 하기 위한 파일 정보를 얻는다.
uploader.setUploableFilesFrom(dx5.get("dext5-b"));

uploader.setUploadURL("업로드 경로");
uploader.upload("AUTO");

서버에서는 DEXTUploadX5_ControlId 폼 이름을 사용하여 업로드한 파일이 어느 컴포넌트의 항목인지 구분할 수 있다.

var files = dext.GetFileElements("DEXTUploadX5_FileData");
// DEXTUploadX5_ControlId 폼 이름으로부터 컴포넌트 아이디를 얻을 수 있다.
var cids = dext.GetStringElements("DEXTUploadX5_ControlId");
// DEXTUploadX5_UniqueId 폼 이름으로부터 파일의 아이디를 얻을 수 있다.
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();
        ...
    }
}

예제

파일 업로드 A 영역 (ID: dext5-a)

파일 추가

파일 업로드 B 영역 (ID: dext5-b)

파일 추가

전송