www.dextsolution.com
DEXTUPLOAD
X5
menu toggle제품설명 > 업로드하기

업로드하기

일반적으로 브라우저에서 파일을 전송하려면 input 요소의 type 속성을 'file'로 설정한다. 그리고 POST 형식으로 전송을 해야 하기 때문에 form 요소의 method 속성을 'post'로 설정하고, enctype 속성을 multipart/form-data로 설정해야 한다. 

<form action="..." method="post" enctype="multipart/form-data">
    <input type="file" name="file1"/>
    <input type="submit" value="Submit"/>
</form>

사용자가 파일을 선택한 후, 'Submit' 버튼을 클릭하면, 브라우저가 서버로 파일 데이터를 멀티 파트 형식으로 인코딩하여 전송한다.

순수 HTML만을 사용하여 업로드를 하려면, 업로드할 파일의 개수만큼 input 요소를 만들어줘야 한다. HTML5에서는 하나의 요소에 여러 파일을 선택할 수도 있고, MIME 설정을 사용하여 필터링도 가능하다. 그러나 여전히 사용하기에 불편한 인터페이스적 요소가 존재하며, 모든 브라우저에서 동일하게 지원하지 않는 문제도 존재한다.

DEXTUploadX5를 사용하기 위한 주요 단계는 다음과 같다.

자바스크립트 파일 선언하기

DEXTUploadX5 컴포넌트를 사용하려면 반드시 dextuploadx5-configuration.js 파일과 dextuploadx5.js 파일을 페이지에 포함해야 한다.

<script src="path/dx5/dextuploadx5-configuration.js"></script>
<script src="path/dx5/dextuploadx5.js"></script>
dextuploadx5-configuration.js 파일 알아보기

이 스크립트 소스에는 dextuploadx5Configuration이라는 컴포넌트 설정을 담은 자바스크립트 객체가 선언되어 있다.

이 객체의 authkey 속성은 발급받은 평가판 인증키 혹은 정식 라이선스의 인증키를 설정하도록 한다. (자세한 내용은 라이선스를 참고한다.)

productPath 속성은 제품이 위치한 웹 경로를 설정한다. 만일 경로가 올바르지 않다면 컴포넌트가 올바르게 시작되지 않는다.

dextuploadx5-configuration.js 스크립트 파일은 DEXTUploadX5가 사용되는 모든 페이지에 포함되어야 하며, dextuploadx5.js 파일보다 먼저 선언되어야 한다.

# dextuploadx5-configuraiton.js
win.dextuploadx5Configuration = {	
    // 파일을 업로드하기 위해서는 반드시 인증키 문자열이 있어야 한다.	
    authkey: "jn+xziPdVh6f5KN17uFHdY95XEvB7o...skip...2YjGiLl92zWiXAyO2FdI9r5XGfwxQ=",
    	
    // 패스란 제품 리소스의 위치를 말한다.
    // 반드시 스키마(http, https)를 포함한 전체 path를 설정해야 한다.(상대 경로로 입력 금지)
    // 전제 경로 예제 productPath: "http://www.sample.com/dx5/",
    // 동일 도메인이라면 productPath: location.origin + "/dx5/"
    productPath: location.origin + "/dx5/"
};
컴포넌트 생성하기

브라우저가 dextuploadx5.js 스크립트 파일을 읽으면 DEXTUploadX5를 관리하는 dx5 객체가 자동으로 생성된다. dx5는 컴포넌트를 생성하고, 관리하는 자바스크립트 객체로서, 해당 페이지에서 전역(scope)으로 사용할 수 있다.

컴포넌트를 생성하려면 컴포넌트를 담고 있는 컨테이너 요소가 필요하고, 페이지의 마지막에 dx5.create 함수를 사용하여 컴포넌트를 생성할 수 있다. (또는 모든 DOM요소가 로드된 후에, dx5.create 함수를 호출해도 된다.)

컴포넌트의 크기는 컴포넌트를 담는 컨테이너의 크기를 기준으로 한다. 그러므로 반드시 컨테이너의 크기를 지정해주어야 한다.

<div id="dext5-container" style="width:500px; height:300px;"><!-- 컴포넌트를 담는 컨테이너 요소 --></div>
<script>
  // id 속성으로 컴포넌트 DOM 아이디를 부여한다.
  // parentId는 컨테이너 아이디를 지정한다.
  dx5.create({ id: "dext5", parentId: "dext5-container" });
</script>

만일 "DEXTUploadX5 component loading failed!"" 메시지 창이 뜨는 경우에 dextuploadx5-configuration.js에서 productPath 설정에 문제가 있는 것이므로 경로가 올바른지 확인해야 한다.

이벤트 연결하기

제품은 내부적으로 특정 활동이 시작하기 전과 후에 이벤트가 발생한다. 컴포넌트가 로드(load)되었다면 onDX5Created 콜백 함수를 호출하며, 만일 사용 중에 오류가 발생하면 onDX5Error 함수를 호출하도록 설정되어 있다. 이벤트를 연결해야만 제품을 사용할 수 있는 것은 아니지만, 복잡하고 다양한 기능을 구현하려면, 이벤트를 적절히 사용해야 한다. 이벤트는 DOM 이벤트처럼 등록을 하는 것이 아니라, 단지 명명된 이름을 가진 콜백 함수를 생성하는 것만으로 이벤트를 잡아낼 수 있다. 

// onDX5Error라는 이름의 함수를 다음과 같이 만들면 컴포넌트에서 오류가 발생할 때, onDX5Error 함수를 호출한다.
function onDX5Error(id, code, msg) {
  ...
}

// onDX5Created 함수를 다음과 같이 만들면, 컴포넌트가 로드(생성)된 후 호출된다.
function onDX5Created(id) {
  ...
}

onDX5Error 콜백 함수가 선언되지 않으면, 발생한 오류를 알아낼 수 없다.

버튼 연결하기

DEXTUploadX5는 컴포넌트 화면 내에 파일 추가 및 업로드를 수행하는 버튼을 내장하고 있지 않다. 몇 가지 일부 기능을 제외하고, 주요 버튼은 모두 외부 HTML 요소를 사용하면 된다. 파일 업로드를 하려면 파일을 추가할 수 있는 버튼과 업로드를 시작할 수 있는 버튼이 필요하며, 두 버튼을 스크립트를 사용하여 컴포넌트 기능을 연결해줘야 한다. 

<button type="button" onclick="addTo('component-id');">추가</button>
<button type="button" onclick="uploadFrom('component-id');">업로드</button>
<script>
function addTo(id) {
  dx5.get(id).openFileDialog();
}

function uploadFrom(id) {
  var dx = dx5.get(id);
  if (dx.hasUploadableItems()) {
    dx.setUploadURL("http://domain/uploadpath");
    dx.upload("AUTO");
  } else {
    alert("업로드할 대상이 없다.");
  }
}
</script>

일부 기능에 대해서는 위와 같이 복잡한 스크립트를 사용하지 않고서 컴포넌트 로드 시점에 자동 바인딩이 되는 기능을 제공하고 있다.

<button id="btn-add-files" type="button" ">추가</button>
<button id="btn-upload" type="button">업로드</button>
<script>
  dx5.create({
    ...,
    // 컴포넌트가 생성될 때, 파일 추가 기능과 파일 업로드 기능이 자동으로 연결하도록 한다.
    btnFile: "btn-add-files", btnUploadAuto: "btn-upload"
  });
</script>

자동 바인딩 기능은 매우 편리하나, 복잡한 기능을 구현하기에는 적합하지 않을 수 있다.

서버측 처리

파일을 업로드하려면 순수 HTML을 사용하거나, DEXTUploadX5와 같은 클라이언트 컴포넌트가 필요하고, 서버는 클라이언트에서 보내어진 파일 데이터를 서버의 특정 위치에 저장하기 하기 위한 추가 구현이 필요하다. 파일 업로드를 처리하기 위한 기술 혹은 기능을 가지고 있는 서버 플랫폼도 있지만, 그렇지 못한 환경도 있다. ASP.NET, PHP, Java Spring Web Framework와 같은 플랫폼은 기본적으로 업로드된 파일을 처리할 수 있지만, ASP, Java Servlet 또는 JSP 같은 기술들은 파일을 처리할 수 없기 때문에, 파일 업로드를 처리를 위한 라이브러리가 필수이다.

자사의 서버 컴포넌트

  • ASP: DEXTUpload Professional
  • ASP.NET: DEXTUpload.NET Professional
  • Java Servlet(JSP)/Spring: DEXTUploadNJ
  • PHP, Nodejs, Python, Ruby: 미지원

대부분의 DEXTUploadX5 기능들은 서버 환경에 영향을 받지 않으나, 대용량 업로드, 파일 다운로드, 열기와 같은 기능은 자사 서버 컴포넌트와 연동이 필요하다. 서버 측 코드는 사용하는 언어, 플랫폼, 사용 중인 컴포넌트에 따라 달라지기 때문에, 해당 환경을 지원하는 컴포넌트의 매뉴얼이나 샘플을 추가적으로 참고해야 한다.

서버로부터 받은 응답 데이터 처리

웹은 GET, POST로 보내어진 요청에 대해 응답 정보를 클라이언트로 되돌려준다.

파일을 업로드하면 그 결과를 응답 데이터로 돌려 받는다. 이 응답 데이터는 컴포넌트의 getResponses 함수를 가지고 얻을 수 있다.

// onDX5UploadCompleted 함수는 업로드가 완료(서버 측 파일 업로드 처리가 완료)되면 호출되는 콜백 함수이다.
function onDX5UploadCompleted(id) {  
  // 응답 데이터를 확인한다.
  alert(dx5.get(id).getResponses(0));
}

"파일 추가 > 파일 업로드 > 서버 측 처리 > 응답 데이터 반환" 과정을 마치면 파일 업로드 작업을 끝이나며, 순수 HTML 업로드와 달리 화면 전환(페이지 변경)이 발생하지 않는다.

Copyright ⓒ DEXTSolution Inc. All rights reserved