적용 방식
전송 컨트롤을 직접 작성하지 않습니다. 관리 화면(Devices)에서 파일을 주고받을 장비와 폴더를 고르면 그 위치에 연결된 코드가 생성되고, 개발자는 그 코드를 페이지에 붙인 뒤 기존 업무 로직과 연결합니다. 하나의 컨트롤로 업로드·다운로드를 처리하며, TransferMode로 용도를 좁힙니다. 파일 수신은 선택한 장비의 에이전트가 처리하므로 업로드를 받는 서버 스크립트를 따로 만들지 않습니다.
개요
웹 임베드란
웹페이지의 특정 요소(예: <div id="file_control">)에 파일 전송 컨트롤을 렌더하고, 코드 제너레이터가 만든 create(options) 호출로 전송을 붙이는 방식입니다. 생성된 코드에는 대상 장비와 폴더 정보가 담겨 있고, 컨트롤은 브라우저에서 파일을 슬라이스 단위로 분할해 여러 세션으로 병렬 전송합니다. 수신은 장비의 에이전트가 맡으므로, 브라우저 기본 업로드로는 어려운 수 GB~수십 GB 파일도 서버 스크립트 없이 안정적으로 처리합니다.
공통 준비
리소스 포함 — 페이지 <head>에 컨트롤 자원 스크립트를 포함합니다.
<script src="./innorix.js"></script>
컨테이너 요소 — 컨트롤이 렌더될 빈 요소를 배치합니다.
<div id="file_control"></div>
생성된 코드 삽입 — 코드 제너레이터가 만든 create() 호출을 붙이고, config.el을 컨테이너 요소와 맞춥니다.
<script>
const config = create({
TransferMode: 'upload',
width: 800,
height: 400,
agent: 'false',
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
config.el = '#file_control';
</script>
대상 장비·폴더 — 저장 위치와 수신은 코드에 담긴 장비·폴더 정보와 그 장비의 에이전트가 담당합니다. 경로를 바꾸려면 코드를 수정하는 것이 아니라 관리 화면에서 다시 생성합니다.
| 목적 | 지정 위치 | 처리 주체 |
|---|---|---|
| 업로드 저장 폴더 | 관리 화면 Devices → 폴더 선택 → Generate | 장비 에이전트 |
| 다운로드 대상 | 폴더 또는 파일 선택 → Generate | 장비 에이전트 |
| 전송 모니터 | 관리 화면 Runs · Activity Log | 플랫폼 |
핵심 요소
| 목적 | 값·항목 |
|---|---|
| 컨트롤 생성 | create(options) |
| 렌더 대상 지정 | config.el = '#file_control' |
| 전송 방향 | TransferMode: 'upload' · 'download' |
| 업무 값 전달 | config.custom |
| 준비·완료 시점 | notifyReadyEvent · uploadCompletedEvent · downloadCompletedEvent |
파일 추가·전송 버튼은 컨트롤이 자체 렌더합니다. 개발자는 컨트롤을 놓을 위치를 정하고 custom·콜백으로 업무 로직과 연결합니다.
기본 흐름
- 관리 화면
Devices에서 대상 장비·폴더 선택 →Generate로 코드 생성 - 페이지에
innorix.js포함 + 컨테이너 요소 배치 - 생성된
create()코드 붙여넣기 →config.el을 요소와 맞춤 - (업로드) 컨트롤에서 파일 추가 → 전송 → 폴더로 저장(에이전트 수신)
- (다운로드) 폴더·파일 대상 코드로 목록 표시 → 전송
적용 방식 선택
설명
컨트롤이 처리할 전송 방향을 TransferMode로 정합니다. 방향은 코드 생성 시점의 선택 대상으로 결정됩니다. 폴더를 고르면 업로드가 기본이고 다운로드를 함께 지정할 수 있으며, 파일을 고르면 다운로드만 생성됩니다.
생성 대상별 방향
| 선택 대상 | 생성 가능한 코드 | TransferMode |
|---|---|---|
| 폴더 | 업로드 · 다운로드 | 'upload' / 'download' |
| 파일(다중 선택 가능) | 다운로드만 | 'download' |
예시
한 페이지에서 업로드와 다운로드를 함께 제공하려면 코드를 두 번 생성해 각각 붙이고, 요소 ID와 config.el을 다르게 지정합니다.
<div id="upload_control"></div>
<div id="download_control"></div>
<script>
const uploadConfig = create({
TransferMode: 'upload',
width: 800, height: 400, agent: 'false',
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
uploadConfig.el = '#upload_control';
const downloadConfig = create({
TransferMode: 'download',
width: 800, height: 400, agent: 'false',
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
downloadConfig.el = '#download_control';
</script>
처리 순서
- 관리 화면에서 폴더 또는 파일을 선택해 방향을 결정
- 생성된 코드의
TransferMode로 업로드·다운로드가 확정됨 - 한 페이지에 둘 이상 두면 요소 ID와
config.el을 서로 다르게 지정
업로드 UI
설명
업로드 컨트롤은 파일·폴더 추가 영역과 전송 버튼을 자체 렌더합니다. 파일 추가는 browse(파일 선택), 폴더 추가, 드롭존(드래그 앤 드롭)으로 받습니다. 추가가 끝나면 컨트롤의 전송 버튼으로 시작하며, 저장 위치는 코드에 담긴 폴더로 정해집니다.
사용 옵션
| 옵션 | 값 | 설명 |
|---|---|---|
TransferMode | 'upload' | 업로드 전용 컨트롤 |
enableDropZone | boolean | 드래그 앤 드롭 첨부 허용 |
addFolder | boolean | 폴더 단위 첨부 허용 |
width · height | number | 컨트롤 표시 크기 |
예시
<div id="file_control"></div>
<script>
const config = create({
TransferMode: 'upload',
width: 800,
height: 400,
agent: 'false',
enableDropZone: true,
addFolder: true,
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
config.el = '#file_control';
</script>
처리 순서
- 업로드 코드 생성(
TransferMode: 'upload') 후 페이지에 삽입 - 컨트롤의
browse·폴더 추가·드롭존으로 항목 첨부 - 컨트롤 전송 버튼 → 슬라이스 분할·병렬 세션으로 대상 폴더에 저장(에이전트 수신)
다운로드 UI
설명
다운로드 컨트롤은 코드 생성 시 선택한 폴더 또는 파일에 연결됩니다. 폴더를 선택하면 폴더의 파일 목록을 내려받는 화면이 되고, 파일을 선택하면 정해진 파일만 내려받습니다. 대상 목록을 클라이언트 코드로 지정하지 않고, 생성 시점에 결정합니다.
생성 유형
| 생성 유형 | 선택 대상 | 용도 |
|---|---|---|
| 폴더 다운로드 | 폴더 | 폴더의 파일 목록을 내려받는 화면 |
| 파일 다운로드 | 파일(다중 선택 가능) | 정해진 파일만 내려받는 화면 |
예시
<div id="download_control"></div>
<script>
const downloadConfig = create({
TransferMode: 'download',
width: 800,
height: 400,
agent: 'false',
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
downloadConfig.el = '#download_control';
</script>
처리 순서
- 관리 화면 탐색기에서 폴더 또는 파일 선택 → 다운로드 코드 생성
- 생성된 코드를 페이지에 삽입 →
config.el을 컨테이너와 맞춤 - 컨트롤이 대상을 슬라이스로 병렬 수신, 특정 파일만 지정한 경우 그 파일만 표시
경로와 정책
파일이 실제로 저장·조회되는 위치와, 어떤 파일을 얼마만큼 받을지 결정하는 정책을 다룹니다. 저장 위치는 코드 생성 시 선택한 장비 폴더로 정해지고, 파일 종류·개수·크기 제한은 컨트롤 옵션과 관리 화면의 전송 정책으로 지정합니다. 서버 스크립트를 작성하지 않습니다.
저장 경로
설명
업로드 저장 폴더와 다운로드 원본 위치는 코드 생성 시 선택한 장비 폴더로 결정됩니다. 폴더 정보는 생성된 코드 안에 함께 담겨 있으며, 이 부분은 손대지 않습니다. 경로는 장비에만 존재하므로 클라이언트에는 노출되지 않고, 파일 수신·조회는 그 장비의 에이전트가 처리합니다.
지정 지점
| 대상 | 지정 방법 | 처리 |
|---|---|---|
| 업로드 저장 폴더 | Devices → 서버 선택 → Browse → 폴더 선택 → Generate | 코드에 폴더 정보 포함, 에이전트 저장 |
| 다운로드 원본 | 폴더·파일 선택 → Generate | 코드에 대상 정보 포함, 에이전트 스트리밍 |
| 전송 단위 분리 | 관리 화면 전송 정책(폴더 규칙) | 플랫폼 |
경로 변경
폴더나 장비가 바뀌면 코드를 수정하지 말고 관리 화면에서 다시 생성합니다.
| 상황 | 처리 |
|---|---|
| 대상 폴더 변경 | 새 폴더를 선택해 재생성 |
| 대상 장비 변경 | 새 장비에서 재생성 |
| 업로드에서 다운로드로 변경 | 방향을 바꿔 재생성 |
처리 순서
- 업로드: 코드 생성 시 선택한 폴더로 에이전트가 슬라이스를 기록
- 다운로드: 코드에 담긴 대상 위치에서 에이전트가 원본을 확인 후 스트리밍
- 경로 변경은 코드 수정이 아니라 관리 화면 재생성으로 처리
파일 정책
설명
받을 파일의 종류·개수·크기를 컨트롤 옵션으로 제한합니다. 허용/차단 확장자, 파일 수, 개별·총합 크기 상한을 지정할 수 있으며, 컨트롤의 안내 문구도 지정한 조건에 맞춰 바뀝니다. 여기서 거는 제한은 화면에서 잘못된 파일을 미리 걸러 주는 용도이며, 반드시 지켜야 하는 기준은 관리 화면(IT 엔지니어)의 전송 정책에서 함께 겁니다.
사용 옵션
| 옵션 | 타입 | 설명 |
|---|---|---|
allowType | string[] | 허용 확장자 목록 (예: ['zip','pdf']) |
denyType | string[] | 차단 확장자 목록 (예: ['exe','bat']) |
maxFileCount | number | 한 번에 올릴 수 있는 파일 수 |
maxFileSize | number | 개별 파일 최대 크기(바이트) |
maxTotalSize | number | 전체 합계 최대 크기(바이트) |
예시
const config = create({
TransferMode: 'upload',
width: 800,
height: 400,
agent: 'false',
allowType: ['tar', '7z', 'rar', 'zip'], // 허용 확장자
maxFileCount: 1,
maxFileSize: 10737418240, // 10 GB
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
config.el = '#file_control';
확장자 제한은 allowType으로 만드는 편이 관리하기 쉽습니다. denyType은 새 확장자가 나올 때마다 목록을 늘려야 합니다.
처리 순서
allowType또는denyType중 하나로 확장자 정책 지정maxFileCount·maxFileSize·maxTotalSize로 수량·용량 상한 지정- 반드시 지켜야 하는 기준은 관리 화면 전송 정책에서 이중으로 적용
접근 권한
설명
컨트롤은 페이지 세션의 쿠키를 전송 요청에 함께 실어 보내고, 페이지에서 입력한 담당자·맥락 값은 custom에 담아 전송과 함께 넘깁니다. custom 값은 전송 이력에 함께 기록되므로 나중에 어느 담당자가 올린 파일인지 확인할 수 있습니다. 다만 이 값은 브라우저에서 만들어지므로 권한 판단에는 쓰지 않고, 확실히 남겨야 하는 정보는 서버 세션과 대조해 기록합니다.
사용 항목
| 항목 | 설명 |
|---|---|
custom | 전송과 함께 넘길 업무·식별 값 객체 |
| 세션 쿠키 | 컨트롤이 요청에 자동 포함(document.cookie) |
| 전송 이력 | custom 값이 기록되는 관리 화면 기록 |
| 전송 정책(관리 화면) | 사용자·시스템별 파일 접근 범위 설정 |
예시
페이지 입력값을 전송과 함께 넘기기:
<input id="name" placeholder="John Doe">
<input id="contact" placeholder="+84 912 345 678">
<script>
const config = create({
TransferMode: 'upload',
width: 800, height: 400, agent: 'false',
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
config.el = '#file_control';
document.querySelector('#uploadBtn').addEventListener('click', function () {
// 페이지에서 입력한 값을 전송과 함께 넘긴다
config.custom.uploader = document.querySelector('#name').value;
config.custom.contact = document.querySelector('#contact').value;
});
</script>
처리 순서
custom에 담당자·맥락 값을 담아 전송과 함께 전달- 컨트롤이 세션 쿠키와 함께 요청, 값은 전송 이력에 기록
- 실제 접근 권한은 관리 화면 전송 정책과 서버 세션 대조로 판단
만료·보안
설명
전송 구간 암호화와 관리 화면의 접근 정책으로 보안을 강화합니다. 컨트롤은 전송 데이터·메타데이터 암호화 옵션을 제공하며, 만료·차단 같은 강제 정책은 관리 화면의 전송 정책에서 관리합니다. 세션 기반 접근을 유지하기 위해 컨트롤은 자격 증명을 포함해 요청합니다.
사용 옵션·정책
| 대상 | 옵션·지정 위치 | 설명 |
|---|---|---|
| 전송 데이터 암호화 | useEncrypt: true | 파일 데이터 암호화 전송 |
| 메타데이터 암호화 | useEncryptMeta: true | 파일명 등 메타데이터 암호화 |
| 접근 만료·차단 | 관리 화면 전송 정책 | 조건별 접근 제한·만료 |
| 세션 기반 접근 | 세션 쿠키 자동 포함 | 교차 출처에서도 세션 유지 |
예시
암호화 전송:
const config = create({
TransferMode: 'upload',
width: 800,
height: 400,
agent: 'false',
useEncrypt: true,
useEncryptMeta: true,
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
config.el = '#file_control';
처리 순서
- 전송 보안이 필요하면
useEncrypt·useEncryptMeta로 암호화 전송 - 만료·차단 같은 강제 정책은 관리 화면 전송 정책에서 설정
- 세션 쿠키를 포함한 요청으로 접근 주체를 유지·검증
웹페이지 적용
관리 화면에서 코드를 생성하고, 그 코드를 실제 페이지에 붙여 업로드·다운로드를 연결하는 전체 과정을 다룹니다. 코드 생성, 업로드 연결, 다운로드 연결, 그리고 뷰·크기 등 UI 구성으로 나뉩니다.
코드 생성
설명
Devices에서 파일을 주고받을 서버를 선택하고 Browse로 파일 탐색기를 엽니다.
탐색기에서 대상 폴더(또는 파일)를 선택한 뒤 Generate를 클릭합니다.
INNORIX Code Generator 화면에서 전송 방향을 정해 코드를 만들고, Copy to Clipboard로 복사하거나 Download as File로 내려받습니다.
생성 코드 구조
생성된 코드는 컨트롤 생성 호출과 렌더 대상 지정으로 이뤄집니다.
<div id="file_control"></div>
<script>
const config = create({
TransferMode: 'upload',
width: 800,
height: 400,
agent: 'false',
custom: {
product: 'webpages',
subproduct: 'codegenerator'
}
});
config.el = '#file_control';
</script>
| 항목 | 내용 |
|---|---|
TransferMode | 'upload' 또는 'download' |
width · height | 컨트롤 표시 크기 |
agent | 에이전트 설치 방식 사용 여부 |
custom | 호출 구분·업무 값 |
config.el | 컨트롤을 렌더할 요소 선택자 |
대상 폴더와 장비 정보는 코드 안에 함께 담겨 있습니다. 이 부분은 손대지 않으며, 경로를 바꾸려면 관리 화면에서 다시 생성합니다. config.el 값은 페이지의 요소 ID와 맞춰야 합니다.
처리 순서
Devices→ 서버 선택 →Browse로 탐색기 열기- 대상 폴더·파일 선택 →
Generate→ 전송 방향 지정 Copy to Clipboard또는Download as File로 코드 확보
업로드 연결
설명
복사한 업로드 코드를 컨트롤이 표시될 위치에 붙여 넣습니다. 페이지를 열면 컨트롤이 표시되고, 파일을 추가해 코드에 담긴 폴더로 바로 업로드할 수 있습니다. 업로드를 받는 서버 스크립트를 따로 만들지 않습니다. 생성된 코드가 선택한 장비의 폴더에 직접 연결되고, 파일 수신은 그 장비의 에이전트가 처리합니다.
확인 항목
| 확인 항목 | 확인 내용 |
|---|---|
| 컨트롤 자원 | innorix.js가 페이지에 포함되어 있는지 |
| 렌더 대상 | config.el이 가리키는 요소가 실제로 존재하는지 |
| 전송 방향 | TransferMode: 'upload'인지 |
| 대상 폴더 | 생성 시 선택한 장비·폴더가 맞는지 |
페이지 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Build File Upload</title>
<script src="./innorix.js"></script>
</head>
<body>
<h1>INNORIX Web-based Upload</h1>
<div id="file_control"></div>
<script>
const config = create({
TransferMode: 'upload',
width: 800,
height: 400,
agent: 'false',
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
config.el = '#file_control';
</script>
</body>
</html>
페이지를 열면 컨트롤이 표시되고, 파일을 추가해 지정한 폴더로 바로 업로드할 수 있습니다.
처리 순서
- 생성된 업로드 코드를 컨트롤 표시 위치에 붙여넣기
innorix.js포함과config.el대상 요소 존재 확인- 컨트롤에서 파일 추가·전송 → 에이전트가 폴더에 저장
다운로드 연결
설명
다운로드 코드는 탐색기에서 폴더 또는 파일을 선택해 생성합니다. 폴더 다운로드는 폴더의 파일 목록을 내려받는 화면이 되고, 특정 파일만 내려받게 하려면 파일을 선택합니다. 파일은 다운로드만 가능하므로 방향이 자동 지정됩니다. 생성된 코드는 업로드와 같은 형태이고 TransferMode만 다릅니다.
클라이언트 연결
<div id="download_control"></div>
<script>
const downloadConfig = create({
TransferMode: 'download',
width: 800,
height: 400,
agent: 'false',
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
downloadConfig.el = '#download_control';
</script>
INNORIX Code Generator에서 Download를 선택하면 다운로드 코드가 생성됩니다.
페이지에 붙이면 파일 목록과 함께 다운로드 화면이 표시됩니다.
한 페이지에서 업로드와 다운로드를 함께 제공하려면 코드를 두 번 생성해 각각 붙이고, 요소 ID와 config.el을 다르게 지정합니다.
<div id="upload_control"></div>
<div id="download_control"></div>
처리 순서
- 탐색기에서 폴더(목록 다운로드) 또는 파일(정해진 파일)을 선택해 생성
- 생성 코드를 페이지에 삽입,
config.el을 컨테이너와 맞춤 - 업로드·다운로드를 함께 두면 요소 ID와
config.el을 서로 다르게 지정
UI 설정
설명
컨트롤의 뷰·크기·부가 UI를 옵션으로 구성합니다. 표시 크기, 드롭존, 전송 창, QR 코드, 상태 아이콘 등을 켜고 끌 수 있습니다. 파일 추가·전송 버튼은 컨트롤이 자체 렌더하므로, 페이지에서는 컨트롤 위치와 부가 버튼(예: custom 값 설정)만 배치합니다.
사용 옵션
| 옵션 | 값 | 설명 |
|---|---|---|
width · height | number | 컨트롤 표시 크기 |
enableDropZone | boolean | 드래그 앤 드롭 영역 |
showTransferWindow | boolean | 전송 진행 창 표시 |
showGraph / useSmoothGraph | boolean | 진행 그래프 표시 |
showQrCode | boolean | 모바일 연동 QR 표시 |
showTransferStatusIcon | boolean | 상태 아이콘 표시 |
hideClientPath | boolean | 클라이언트 경로 숨김 |
transferWindowTitle | string | 전송 창 제목 |
예시
<div id="file_control"></div>
<script>
const config = create({
TransferMode: 'upload',
width: 800,
height: 400,
agent: 'false',
enableDropZone: true,
showTransferWindow: true,
showQrCode: true,
hideClientPath: true,
transferWindowTitle: 'INNORIX',
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
config.el = '#file_control';
</script>
처리 순서
width·height와 표시 옵션으로 컨트롤 외형 구성- 필요 시
enableDropZone·showTransferWindow등 부가 UI 켜기 - 페이지에는 컨트롤 위치와
custom설정용 버튼만 배치
상태와 결과
전송 진행 상태를 표시하고, 완료·실패 결과를 콜백으로 받아 후속 처리하는 방법을 다룹니다. 컨트롤은 진행 UI를 자체 렌더하며, 주요 시점은 생성 설정의 콜백으로 통지합니다.
진행 상태
설명
전송 중 진행률·속도는 컨트롤의 전송 창과 그래프로 표시됩니다. 표시 요소는 옵션으로 켜고 끌 수 있으며, 컨트롤 준비 완료 시점은 notifyReadyEvent로 확인합니다. 컨트롤이 준비되기 전에는 전송 버튼을 비활성화해 두는 편이 좋습니다.
사용 옵션·콜백
| 옵션·콜백 | 설명 |
|---|---|
showTransferWindow | 진행 창 표시 |
showGraph | 진행 그래프 표시 |
useSmoothGraph | 그래프 부드럽게 표시 |
showTransferStatusIcon | 상태 아이콘 표시 |
notifyReadyEvent | 컨트롤 초기화 완료 콜백 |
예시
const config = create({
TransferMode: 'upload',
width: 800, height: 400, agent: 'false',
showTransferWindow: true,
showGraph: true,
useSmoothGraph: true,
custom: { product: 'webpages', subproduct: 'codegenerator' },
notifyReadyEvent: function () {
// 컨트롤 준비 완료 — 전송 버튼 활성화
document.querySelector('#uploadBtn').disabled = false;
}
});
config.el = '#file_control';
처리 순서
- 진행 표시 옵션(
showTransferWindow·showGraph등)으로 UI 구성 notifyReadyEvent에서 준비 완료 확인 후 조작 허용- 전송 중 컨트롤이 진행률·속도를 자동 갱신
완료 결과
설명
업로드·다운로드가 끝나면 각각 uploadCompletedEvent · downloadCompletedEvent 콜백이 호출됩니다. 콜백 인자로 전달되는 결과로 완료 파일을 확인하고 후속 로직(업무 시스템 등록, 화면 갱신 등)을 실행합니다. 완료 콜백은 브라우저에서 실행되므로, 사용자가 창을 닫으면 호출되지 않습니다. 수십 GB 전송처럼 오래 걸리는 화면이라면 완료 기록을 여기에만 의존하지 말고 관리 화면의 전송 이력으로 교차 확인합니다.
완료 콜백
| 콜백 | 시점 |
|---|---|
uploadCompletedEvent | 업로드 전체 완료 |
downloadCompletedEvent | 다운로드 전체 완료 |
예시
const config = create({
TransferMode: 'upload',
width: 800, height: 400, agent: 'false',
custom: { product: 'webpages', subproduct: 'codegenerator' },
uploadCompletedEvent: function (result) {
// 완료된 업로드를 업무 시스템에 넘김
fetch('/api/submissions', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
uploader: document.querySelector('#name').value,
files: result
})
});
},
downloadCompletedEvent: function (result) {
console.log('download completed', result);
}
});
config.el = '#file_control';
처리 순서
- 생성 설정에
uploadCompletedEvent·downloadCompletedEvent등록 - 전송 완료 시 콜백 인자로 결과 수신 → 업무 로직 연결
- 오래 걸리는 전송은 관리 화면 전송 이력으로 완료를 교차 확인
결과 이벤트
설명
컨트롤은 전송 수명 주기 동안 준비·완료·오류 시점을 콜백으로 통지합니다. 준비·완료 시점은 생성 설정의 콜백으로 직접 연결하고, 전송 실패는 오류 콜백으로 받습니다.
이벤트 콜백
| 콜백 | 시점 |
|---|---|
notifyReadyEvent | 컨트롤 준비 완료 |
uploadCompletedEvent | 업로드 완료 |
downloadCompletedEvent | 다운로드 완료 |
transferErrorEvent | 전송 오류 |
예시
const config = create({
TransferMode: 'upload',
width: 800, height: 400, agent: 'false',
custom: { product: 'webpages', subproduct: 'codegenerator' },
notifyReadyEvent: function () { /* 준비 완료 */ },
uploadCompletedEvent: function (result) { /* 업로드 완료 */ },
downloadCompletedEvent: function (result) { /* 다운로드 완료 */ },
transferErrorEvent: function (error) { /* 전송 오류 */ }
});
config.el = '#file_control';
처리 순서
- 준비·완료·오류 시점을 생성 설정 콜백으로 연결
- 콜백 인자로 받은 결과로 화면·기록 갱신
- 오류 콜백에서 재시도 안내·업무 로직 분기 처리
오류 처리
설명
전송 실패는 transferErrorEvent로 통지됩니다. 컨트롤은 재시도·자동 복구 정책에 따라 일시적 오류를 스스로 회복하며, 허용 오류 수를 넘으면 전송을 중단합니다. 강제로 차단해야 하는 조건은 관리 화면의 전송 정책에서 관리합니다.
사용 옵션·콜백
| 대상 | 옵션·콜백 | 설명 |
|---|---|---|
| 전송 오류 콜백 | transferErrorEvent | 전송 실패 통지 |
| 재시도 횟수 | retryCount (기본 5) | 실패 시 재시도 횟수 |
| 재시도 간격 | retryDelay (기본 3초) | 재시도 대기 시간 |
| 최대 오류 허용 | maxErrorCount | 초과 시 전송 중단 |
| 접근 차단·만료 | 관리 화면 전송 정책 | 조건부 거부·만료 |
예시
const config = create({
TransferMode: 'upload',
width: 800, height: 400, agent: 'false',
retryCount: 5,
retryDelay: 3,
maxErrorCount: 9999,
custom: { product: 'webpages', subproduct: 'codegenerator' },
transferErrorEvent: function (error) {
console.log('transfer error', error);
}
});
config.el = '#file_control';
처리 순서
retryCount·retryDelay로 일시적 오류의 자동 재시도 정책 설정- 재시도로도 회복되지 않으면
transferErrorEvent로 통지 maxErrorCount초과 시 중단, 강제 차단은 전송 정책에서 처리
대용량 전송
수 GB~수십 GB 파일을 안정적으로 전송하기 위한 슬라이스 분할·병렬 세션, 중단 지점 복구, 자동 재시도, 무결성 검증을 다룹니다. 이 기능들은 생성된 create() 설정에 옵션으로 켜고 값을 조정하며, 수신·검증은 장비의 에이전트가 처리합니다.
대용량 전송
설명
컨트롤은 파일을 슬라이스(청크) 단위로 분할해 여러 세션으로 병렬 전송하고, 고속 모드로 처리량을 높입니다. 슬라이스 크기·세션 수를 조정해 네트워크 환경에 맞게 튜닝합니다. 저장·조립은 에이전트가 담당하므로 서버 스크립트가 필요 없습니다.
사용 옵션
| 옵션 | 기본 | 설명 |
|---|---|---|
sliceSize | 2097152 (2 MB) | 슬라이스 크기(바이트) |
uploadSliceSize · downloadSliceSize | 0(=sliceSize) | 방향별 슬라이스 크기 |
sessionCount | 15 | 병렬 세션 수 |
uploadSessionCount · downloadSessionCount | 0(=sessionCount) | 방향별 세션 수 |
highSpeedMode / isHighSpeed | true | 고속 전송 |
largeAccelerator | false | 대용량 가속 |
예시
const config = create({
TransferMode: 'upload',
width: 800, height: 400, agent: 'false',
isHighSpeed: true,
sliceSize: 2097152, // 2 MB 슬라이스
uploadSessionCount: 16, // 병렬 세션 16개
downloadSessionCount: 16,
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
config.el = '#file_control';
처리 순서
- 파일을
sliceSize단위 슬라이스로 분할 sessionCount(방향별 세션 수)만큼 병렬로 슬라이스 전송- 고속 모드·가속 옵션으로 처리량 최적화, 에이전트가 저장·조립
중단 복구
설명
네트워크 단절이나 창 종료로 전송이 끊겨도, 이미 저장된 슬라이스 이후 지점부터 이어받습니다. 업로드는 슬라이스 오프셋 기준으로 재개하고, 다운로드는 범위 요청으로 남은 구간을 이어받습니다. 중복 처리 정책으로 이어받기·덮어쓰기 등을 지정합니다. 재개 지점 추적과 조립은 에이전트가 처리합니다.
사용 옵션
| 옵션 | 값 | 설명 |
|---|---|---|
resumeType | overwrite · relay · nosend · numbering · confirm | 업로드 재개 방식 |
uploadDuplicate | boolean / 정책 | 업로드 중복 처리 |
downloadDuplicate | resume 등 | 다운로드 중복·이어받기 처리 |
resumeCondition | boolean | 재개 조건 사용 |
attachIncompleteFiles | boolean | 미완료 파일 재첨부 |
autoRecovery | boolean | 자동 복구 |
enableAutoReattach | boolean | 자동 재첨부(재연결) |
예시
const config = create({
TransferMode: 'upload',
width: 800, height: 400, agent: 'false',
resumeType: 'relay', // 저장된 지점부터 이어받기
downloadDuplicate: 'resume',
autoRecovery: true,
attachIncompleteFiles: true,
enableAutoReattach: true,
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
config.el = '#file_control';
처리 순서
- 전송 중 슬라이스별 완료 지점을 에이전트가 추적
- 중단 후 재개 시 마지막 완료 슬라이스 이후부터 전송
resumeType·downloadDuplicate정책으로 이어받기·덮어쓰기 결정
자동 재시도
설명
일시적 네트워크 오류가 발생한 슬라이스는 설정한 횟수·간격으로 자동 재시도합니다. 재시도로 회복되면 전송이 계속되고, 허용 오류 수를 넘으면 전송을 중단합니다.
사용 옵션
| 옵션 | 기본 | 설명 |
|---|---|---|
retryCount | 5 | 슬라이스 실패 시 재시도 횟수 |
retryDelay | 3 | 재시도 간격(초) |
maxErrorCount | 9999 | 누적 허용 오류 수 |
autoRecovery | true | 자동 복구 사용 |
timeout.minSeconds | 60 | 최소 소켓 타임아웃(초) |
timeout.bytes / timeout.seconds | 0 | 바이트당 타임아웃 계산 |
예시
const config = create({
TransferMode: 'upload',
width: 800, height: 400, agent: 'false',
retryCount: 5,
retryDelay: 3,
maxErrorCount: 9999,
autoRecovery: true,
timeout: { minSeconds: 60, bytes: 0, seconds: 0 },
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
config.el = '#file_control';
처리 순서
- 슬라이스 전송 실패 시
retryDelay간격으로retryCount만큼 재시도 - 재시도 성공 시 전송 계속,
timeout기준으로 응답 지연 감지 - 누적 오류가
maxErrorCount를 넘으면 전송 중단·오류 통지
무결성 검증
설명
전송 후 파일이 손상 없이 도착했는지 슬라이스 단위 해시로 검증합니다. 무결성이 켜지면 컨트롤이 구간별 해시를 요청하고, 장비의 에이전트가 해당 슬라이스의 해시를 계산해 대조합니다. 별도의 서버 스크립트를 작성하지 않습니다.
사용 옵션
| 옵션 | 값 | 설명 |
|---|---|---|
downloadIntegrity | boolean | 다운로드 무결성 검증 사용 |
setVerification | 'enable' · 'disable' | 검증 모드 |
예시
const config = create({
TransferMode: 'download',
width: 800, height: 400, agent: 'false',
downloadIntegrity: true,
setVerification: 'enable',
custom: { product: 'webpages', subproduct: 'codegenerator' }
});
config.el = '#download_control';
처리 순서
downloadIntegrity·setVerification으로 검증 사용- 컨트롤이 구간별 해시를 요청, 에이전트가 슬라이스 해시를 계산
- 계산 해시와 수신 슬라이스를 대조해 손상 여부 판정
코드 재생성과 관리
설명
생성된 코드에는 장비와 폴더 정보가 담겨 있습니다. 방향과 대상은 재생성, 표시와 정책은 코드 수정으로 나눠 다룹니다. 여러 페이지에서 같은 폴더를 쓴다면 생성한 코드를 공통 파일로 빼고 각 페이지에서 불러오면, 폴더가 바뀌었을 때 한 곳만 고치면 됩니다.
처리 기준
| 상황 | 처리 |
|---|---|
| 대상 폴더 변경 | 새 폴더를 선택해 재생성 |
| 대상 장비 변경 | 새 장비에서 재생성 |
| 업로드에서 다운로드로 변경 | 방향을 바꿔 재생성 |
| 표시 크기·파일 정책 변경 | 생성된 코드에서 옵션만 수정 |
공통 파일 예시
<script src="./innorix-upload.js"></script>
<div id="file_control"></div>
확인 항목
| 확인 항목 | 확인 내용 |
|---|---|
| 코드 생성 | 대상 장비와 폴더, 전송 방향 |
| 삽입 | 컨트롤 자원(innorix.js)과 렌더 대상 요소 |
| 업무 정보 | custom으로 넘기는 입력값 |
| 정책 | 허용 확장자와 개수·용량 제한 |
| 완료 처리 | 콜백에서 이어지는 업무 로직 |
| 재생성 | 대상이 바뀌었을 때의 갱신 절차 |