FileUpTransfer 소개

FileUpTransfer 오브젝트는 사용자가 작성하거나 가지고 있는 파일을 서버 저장소에 업로드하는 기능을 제공합니다. 웹이 등장하면서 파일을 전송하는 것은 중요한 이슈였으나 HTML 기본 기능으로는 원하는 작업을 수행하기 힘들었기 때문에 다양한 서드파티 서비스가 등장했습니다. 대용량 파일을 다루거나 여러 개의 파일을 한 번에 업로드 하는 작업을 위한 서비스가 제공되기도 합니다.

사용 예

게시판에 글을 작성하면서 첨부자료를 업로드하거나 이메일 작성 시 첨부파일을 추가하는 작업 시 사용합니다.

FileUpload 컴포넌트와 차이

FileUpload 컴포넌트는 기본 UI를 제공하는 컴포넌트로 드래그앤드롭이나 다른 형식의 인터페이스를 구현하기에 제약이 있습니다. 이런 제약을 해결하고자 프로젝트에서 필요한 UI를 만들고 파일을 선택하고 전송하는 기능을 구현할 수 있도록 FileUpTransfer 오브젝트를 Invisible Object로 제공합니다.

이미 FileUpload 컴포넌트를 적용해 사용하는 프로젝트가 있기 때문에 FileUpload 컴포넌트는 현재 상태를 유지하지만 FileUpTransfer 오브젝트를 사용하는 것을 권장합니다.

선택한 파일 업로드하기

파일 선택 대화 상자에서 파일을 선택하거나 드래그앤드롭으로 추가한 파일을 지정된 서버에 업로드합니다.

예제

[open] 버튼을 클릭하면 파일 선택 대화상자를 표시합니다. 파일을 선택하고 파일 선택 대화상자를 닫으면 Grid 컴포넌트에 파일 목록을 추가합니다. 윈도우 탐색기에서 파일을 선택하고 Grid 컴포넌트 영역 위로 드래그앤드롭해도 파일을 추가할 수 있습니다.

파일 목록을 추가한 상태에서 [upload] 버튼을 클릭하면 해당 파일을 서버로 전송하고 전송 결과를 TextArea 컴포넌트에 표시합니다.

sample_fileuptransfer_01.xfdl

예제에서 사용한 핵심 기능

datatype, filelist

DragEventInfo, GridDragEventInfo, ListViewDragEventInfo, MenuDragEventInfo 오브젝트에 추가된 속성입니다. 윈도우 탐색기에서 파일을 선택하고 드래그앤드롭하는 경우에는 datatype 속성값이 "file"로 처리되고 filelist 속성값에서 선택한 파일 목록을 확인할 수 있습니다.

addFile

VirtualFile 오브젝트 형태로 파일 정보를 추가합니다. 추가된 파일 정보는 FileUpTransfer 오브젝트의 filelist 속성에서 확인할 수 있습니다.

upload

POST 방식으로 파일을 전송합니다.

예제 구현 방법

Grid 컴포넌트 아래에 Static 컴포넌트가 배치되어야 합니다. Staitc 컴포넌트를 먼저 배치하고 그 위에 Grid 컴포넌트를 배치하든지 아니면 Static 컴포넌트를 나중에 배치하고 메뉴[Design > Arrange > Send Backward]를 사용해 순서를 변경할 수 있습니다.

Grid 컴포넌트 뒤에 배치하는 Static 컴포넌트는 사용자에게 파일을 드래그앤드롭할 수 있는 영역이라는 것을 표시하는 역할을 합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.FileDialog00.open('Nexacro N', FileDialog.MULTILOAD);
};

파일을 추가하는 방법이 파일 선택 대화상자와 드래그앤드롭 두 가지로 나누어져서 추가한 파일을 처리하는 부분을 addFileList 라는 function으로 분리했습니다.

this.FileDialog00_onclose = function(obj:nexacro.FileDialog,e:nexacro.FileDialogEventInfo)
{
	this.addFileList(e.virtualfiles);
};

this.addFileList = function(filelist)
{
	for (var i = 0, len = filelist.length, vFile; i < len; i++)
	{
		vFile = filelist[i];
		vFile.addEventHandler("onsuccess", this.FileList_onsuccess, this);
		vFile.addEventHandler("onerror", this.FileList_onerror , this);
		
		vFile.open(null, 1);
	}
}

사용자가 윈도우 탐색기에서 파일을 선택하고 드래그해서 Grid 컴포넌트 영역으로 들어왔을때 투명도 속성을 조정해서 뒤에 있는 Static 컴포넌트가 보여지도록 합니다. Grid 컴포넌트 영역 밖으로 나가거나 드롭 동작이 처리되면 투명도를 다시 원래 상태로 돌려놓습니다.

this.Grid00_ondragenter = function(obj:nexacro.Grid,e:nexacro.DragEventInfo)
{
	if(e.datatype == "file")
	{
		this.Grid00.set_opacity(0.5);
	}
};

this.Grid00_ondragleave = function(obj:nexacro.Grid,e:nexacro.DragEventInfo)
{
	this.Grid00.set_opacity(1);
};

this.Grid00_ondrop = function(obj:nexacro.Grid,e:nexacro.GridDragEventInfo)
{
	this.Grid00.set_opacity(1);
	if(e.datatype == "file")
	{
		this.addFileList(e.filelist);
	}
};

ondrop 이벤트 함수에서는 addFileList function에 filelist 속성을 전달합니다.

onsuccess 이벤트 함수에서는 Dataset 오브젝트에 파일명과 파일 크기를 표시하고 FileUpTransfer 오브젝트의 addFile 메소드를 실행해 파일 정보를 추가합니다.

this.FileList_onsuccess = function(obj:nexacro.VirtualFile, e:nexacro.VirtualFileEventInfo)
{
	switch (e.reason)
	{
		case 1:
			obj.getFileSize();
			break;
		case 9:
			var nRowIdx = this.Dataset00.addRow();
			this.Dataset00.setColumn(nRowIdx, 0, obj.filename);
			this.Dataset00.setColumn(nRowIdx, 1, this.cutFileSize(e.filesize));
			this.FileUpTransfer00.addFile(obj.filename, obj);
			break;
	}
}

this.FileList_onerror = function(obj:nexacro.VirtualFile, e:nexacro.VirtualFileErrorEventInfo)
{
	trace("errortype: "+e.errortype);
	trace("errormsg: "+e.errormsg);
	trace("statuscode: "+e.statuscode);
}

this.cutFileSize = function(filesize)
{
	var sOutput = filesize + " bytes";
	for (var aMultiples = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], nMultiple = 0, nApprox = filesize / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) 
	{
		sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple];
	}
	return sOutput;
};

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.TextArea00.set_value("");
	this.FileUpTransfer00.upload('http://demo.nexacro.com/developer_guide/N/Service/fileupload.jsp');
};

this.FileUpTransfer00_onprogress = function(obj:nexacro.FileUpTransfer,e:nexacro.FileUpTransferProgressEventInfo)
{
	this.fn_addlog(e.loaded+"/"+e.total);
};

this.FileUpTransfer00_onsuccess = function(obj:nexacro.FileUpTransfer,e:nexacro.FileUpTransferEventinfo)
{
	this.fn_addlog(e.code);
	this.fn_addlog(e.message);
};

this.FileUpTransfer00_onerror = function(obj:nexacro.FileUpTransfer,e:nexacro.FileUpTransferErrorEventInfo)
{
	this.fn_addlog(e.errormsg);
	this.fn_addlog(e.statuscode);
};

this.fn_addlog = function(strMessage)
{
    this.TextArea00.insertText(strMessage + '\n');
}