19.FileUpTransfer

19.1FileUpTransfer 소개

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

FileUpTransfer 오브젝트는 17.0.0.1900 버전부터 지원합니다.

19.1.1사용 예

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

19.1.2FileUpload 컴포넌트와 차이

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

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

19.2선택한 파일 업로드하기

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

19.2.1예제

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

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

그림 19-1sample_grid_26_01

sample_fileuptransfer_01.xfdl

19.2.2예제에서 사용한 핵심 기능

datatype, filelist (17.0.0.1900 버전부터 지원)

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

addFile (17.0.0.2100 버전부터 파라미터 변경)

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

upload

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

19.2.3예제 구현 방법

1

화면에 2개의 Button 컴포넌트를 배치하고 Button 컴포넌트 아래에 Grid 컴포넌트와 TextArea 컴포넌트를 배치합니다.

2

Dataset 오브젝트를 추가하고 'name', 'size' 두 개의 컬럼을 생성합니다.

3

Grid 컴포넌트에 Dataset 오브젝트를 바인딩합니다.

4

Grid 컴포넌트와 같은 크기, 같은 위치로 Static 컴포넌트를 배치합니다.

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

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

5

툴바에서 FileUpTransfer를 선택하고 화면에 추가합니다. FileUpTransfer는 Invisible Object 영역에 표시됩니다.

6

[open] Button 컴포넌트의 onclick 이벤트 함수를 아래와 같이 작성합니다.

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

7

FileDialog 오브젝트의 onclose 이벤트 함수를 아래와 같이 작성합니다.

파일을 추가하는 방법이 파일 선택 대화상자와 드래그앤드롭 두 가지로 나누어져서 추가한 파일을 처리하는 부분을 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);
    }
}

8

Grid 컴포넌트의 drag, drop 관련 이벤트 함수를 아래와 같이 작성합니다.

사용자가 윈도우 탐색기에서 파일을 선택하고 드래그해서 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 속성을 전달합니다.

9

VirtualFile 오브젝트의 onsuccess, onerror 이벤트 함수를 아래와 같이 작성합니다.

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

17.0.0.2100 버전부터 addFile 메소드 사용시 ID 파라미터와 VirtualFile 오브젝트를 같이 지정해주어야 합니다. ID 파라미터가 지정되지 않는 경우 정상 동작하지 않습니다.

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

10

파일 크기를 적절한 단위로 표시하는 function을 아래와 같이 추가합니다.

코드는 아래 링크에서 참조했습니다.

https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Example_Showing_file(s)_size

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

11

[upload] Button 컴포넌트의 onclick 이벤트 함수를 아래와 같이 작성합니다.

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

서버에서 사용하는 코드는 아래 링크에서 참조했습니다.

http://www.tutorialspoint.com/jsp/jsp_file_uploading.htm

적용한 코드는 아래 링크에서 확인할 수 있습니다.

https://github.com/TOBESOFT-DOCS/sample_nexacroplatform_17/blob/master/Service/fileupload.jsp

12

FileUpTransfer 오브젝트의 onprogress, onsuccess, onerror 이벤트 함수를 아래와 같이 작성합니다.

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

onprogress 이벤트는 IE8, IE9에서는 지원하지 않으며 실행 환경에 따라 이벤트 발생 시점이 달라질 수 있습니다.

서버 내 코드에서 5MB 이상의 파일은 에러 처리하고 있습니다. 하지만, 파일 크기와 상관없이 onprogress 이벤트가 처리되는 것은 확인할 수 있습니다.

로컬 또는 다른 도메인 환경에서 테스트하는 경우에는 권한 확인을 위해 사전 호출(preflight request)을 하면서 upload 메소드 파라미터로 지정된 도메인에 2번 접근하게 됩니다. 자세한 내용은 아래 링크를 참고하세요.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

13

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다. 파일 선택 대화상자 또는 드래그앤드롭으로 파일을 추가하고 업로드를 시도해봅니다.