# FileUpload

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FMdCv0WUqBD3H71uxyGoJ%2FFileUpload.png?alt=media&#x26;token=e66c959d-5c8e-495f-a1f9-597d7f83032f" alt="" width="125"><figcaption></figcaption></figure>

## 컨트롤 설명

FileUpload 컨트롤을 통해 다양한 파일을 쉽게 표시하고 관리할 수 있습니다. 사용자는 파일을 선택해 업로드할 수 있습니다.

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2Fj9xBBiFJhbIx6OhKqanQ%2Ffileupload_edit.gif?alt=media&#x26;token=a80cad0f-1250-4119-97f2-d73b106edd0f" alt="" width="188"><figcaption><p>파일업로드 컨트롤 사용 예시</p></figcaption></figure>

## 디자인(Design) 모드

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FKYjs1qlGoB7BDWN3GTZ9%2Fimage.png?alt=media&#x26;token=7842d4e2-c510-41c0-a3ff-3e387b466725" alt=""><figcaption><p>파일업로드 컨트롤 Design 속성 캡쳐</p></figcaption></figure>

### 공통 디자인 속성

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><a href="../../design-mode/caption">캡션</a></td><td></td><td></td><td><a href="../../design-mode/caption">caption</a></td></tr><tr><td><a href="../../design-mode/control-name">컨트롤 명</a></td><td></td><td></td><td></td></tr><tr><td><a href="../../design-mode/width-height">너비 높이</a></td><td></td><td></td><td><a href="../../design-mode/width-height">width-height</a></td></tr><tr><td><a href="../../design-mode/margin">마진</a></td><td></td><td></td><td><a href="../../design-mode/margin">margin</a></td></tr><tr><td><a href="../../design-mode/padding">패딩</a></td><td></td><td></td><td><a href="../../design-mode/padding">padding</a></td></tr><tr><td><a href="../../design-mode/absolute-position">절대값 위치 설정</a></td><td></td><td></td><td><a href="../../design-mode/absolute-position">absolute-position</a></td></tr><tr><td><a href="../../design-mode/opacity">투명도 설정</a></td><td></td><td></td><td><a href="../../design-mode/opacity">opacity</a></td></tr></tbody></table>

## 개발(Dev) 모드

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FUuvqpSIBBdpzcS1oMnDE%2Fimage.png?alt=media&#x26;token=b10f03ce-4f83-4136-8922-f576ef6ecf54" alt=""><figcaption><p>파일업로드 컨트롤 Dev 속성 캡쳐</p></figcaption></figure>

### 타이틀

컨트롤의 타이틀 영역에 보여줄 내용을 입력합니다.

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FytH8LmzV4VWHacLLVKdt%2Fimage.png?alt=media&#x26;token=4a946d92-96c6-4931-9193-c2124b62e201" alt="" width="371"><figcaption><p>파일업로드 컨트롤 타이틀 영역</p></figcaption></figure>

### 비고

컨트롤의 비고 영역에 보여줄 내용을 입력합니다.

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FAEvZloSvkHDW5v69tjZl%2Fimage.png?alt=media&#x26;token=157f9871-3bf3-4744-8aca-916098e91b84" alt="" width="371"><figcaption><p>파일업로드 컨트롤 비고 영역</p></figcaption></figure>

### Module

파일업로드시 사용할 Module 유형을 선택합니다. 각 Module 별로 하위 설정(파일 시스템 속성 정의)이 다릅니다.

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FTQtIXz3FzStzqlPzDYQ3%2Fimage.png?alt=media&#x26;token=e4bc579d-01c4-4a7b-bb00-a69697df9bca" alt=""><figcaption><p>파일업로드 컨트롤 Module 콤보</p></figcaption></figure>

<table><thead><tr><th width="178">Module명</th><th>설명</th></tr></thead><tbody><tr><td>FlexFile</td><td>플렉스튜디오에서 제공하는 파일 시스템입니다. 파일 업로드시 FileKey를 발급합니다.<br><a href="#flexfile">FlexFile 추가 속성</a></td></tr><tr><td>KsystemFile</td><td>K-System ERP 전용 파일 시스템입니다. 별도 도입이 필요합니다.<br><a href="#k-system-erp">K-System ERP 전용 파일 시스템 추가 속성</a><br><br>사용시 테넌트 설정에서<a href="../../../reference/data-connection/k-system"> 별도 설정이 필요</a>합니다.</td></tr><tr><td>KsystemPayPDF</td><td>K-System ERP 전용 파일 시스템입니다. 국세청 연말정산 PDF 분석시 사용합니다. 별도 계약이 필요합니다.<br><a href="#k-system-erp">K-System ERP 전용 파일 시스템 추가 속성</a><br><br>사용시 테넌트 설정에서<a href="../../../reference/data-connection/k-system"> 별도 설정이 필요</a>합니다.</td></tr></tbody></table>

### 파일 시스템 속성 정의

### 업로드한 파일 정보 관리

파일 업로드 후 서버로부터 전달받은 정보들을 콜렉션에 저장합니다.

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FmSoHxfEntbvjh5KiVVEi%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-07-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.04.51.png?alt=media&#x26;token=28f325f4-3abb-408b-aca5-93abf559d32c" alt=""><figcaption><p>업로드한 파일 정보 관리</p></figcaption></figure>

<table><thead><tr><th width="251">속성명</th><th>설명</th></tr></thead><tbody><tr><td>파일 정보를 카테고리로 저장</td><td>파일 업로드 후 발급받은 FileKey, 파일 명 등 다양한 정보들을 어떻게 저장할지 선택합니다. 카테고리로 저장 하는 경우 카테고리명, 사용하지 않는 경우 이너블럭 키에 대한 정의가 필요합니다.</td></tr><tr><td>카테고리명</td><td>파일 정보를 담은 섹터를 원하는 카테고리에 할당합니다.</td></tr><tr><td>이너블럭 키</td><td>파일 정보를 담은 섹터를 이너블럭으로 구성하여 원하는 키 값으로 할당합니다.</td></tr><tr><td>콜렉션 키</td><td>발급받은 FileKey를 어떤 콜렉션 키로 저장할지 정의합니다. 입력하지 않는 경우 flexFileKey에 저장됩니다.</td></tr><tr><td>상위 데이터 연결관계 설정</td><td>파일 정보를 카테고리로 저장하는 경우 활성화됩니다.<br><a href="../../../concept/undefined">[심화] 카테고리 연결관계</a>에서 연결관계에 대한 이해를 도울 수 있습니다.</td></tr></tbody></table>

{% hint style="info" %}
파일 키를 제외한 기타 정보들은 별도로 콜렉션 키 값을 정의하지 않습니다. 괄호 안에 정의된 키로 자동 저장됩니다. 파일 명(fileName), 파일 확장자(fileExt), 파일 크기(fileSize)
{% endhint %}

{% hint style="warning" %}
K-System ERP 전용 파일 시스템을 사용하는 경우 규격화된 정보를 제공합니다. \
KsystemFile의 경우 처리 결과 값을 AttachFileNo, FileName, FileUploadDateTime으로 지원합니다.\
KsystemPayPDF의 경우 동일하나 XMLString을 추가로 지원합니다.
{% endhint %}

#### FlexFile 추가 속성

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FCZwGDXTcuqQUB3m3My3s%2Fimage.png?alt=media&#x26;token=59782e92-7e7c-4c21-ba29-81db4ff34b91" alt=""><figcaption><p>FlexFile 추가 속성</p></figcaption></figure>

* **공유 범위 설정**\
  파일 공유범위를 지정합니다. 사용자별로 설정하는 경우 본인이 업로드한 파일만 사용 가능합니다. 테넌트별로 설정하는 경우 같은 테넌트 내에서 파일 공유를 자유롭게 할 수 있습니다.
* **폴더 명**\
  업로드한 파일을 저장할 폴더명을 입력합니다. 별도로 입력하지 않은 경우 files 폴더에 저장됩니다.

#### K-System ERP 전용 파일 시스템 추가 속성

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2Fc5ABgMZKFgYuqxnchSzb%2Fimage.png?alt=media&#x26;token=97f132ae-7a87-4f58-8743-00fee055db8f" alt=""><figcaption><p>K-System ERP 전용 추가 속성</p></figcaption></figure>

* **콜렉션키(멀티)**\
  AttachFileSeq 값을 저장할 콜렉션 키를 입력합니다.
* **Const**\
  ERP 시스템에 정의된 파일 const 정보를 입력합니다.

{% hint style="info" %}
KsystemFile 모듈을 사용하는 경우 파일 변경시 (삭제, 추가) 이벤트를 연결할 수 있습니다.
{% endhint %}

### 공통 개발 속성

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td></td><td><a href="../../dev-mode/component/status">컨트롤 상태</a></td><td></td><td><a href="../../dev-mode/component/status">status</a></td></tr><tr><td></td><td><a href="../../../reference/voca/authkey">권한키</a></td><td></td><td><a href="../../../reference/voca/authkey">authkey</a></td></tr><tr><td></td><td><a href="../../dev-mode/component/loadscript">로드스크립트</a></td><td></td><td><a href="../../dev-mode/component/loadscript">loadscript</a></td></tr></tbody></table>