# 파일 업로드 셀 

## Content

SpreadJS는 파일 업로드 셀 유형(File Upload cell type)을 제공하여 이미지나 파일을 업로드할 수 있도록 지원합니다. 이미지 업로드의 경우, `.jpg`, `.jpeg`, `.png`, `.gif`, `.bmp`, `.svg`, `.ico`, `.webp` 형식을 허용합니다. SpreadJS는 이러한 업로드된 파일들을 객체(object) 형태로 저장합니다.
기본적으로, **File Upload** 셀 유형에는 기본 업로드 버튼이 표시되며, 이미지를 업로드하면 이미지의 썸네일이 표시되고, 그 외의 파일을 업로드하면 파일 확장자에 해당하는 아이콘과 파일 이름이 표시됩니다.
파일이나 이미지를 **File Upload** 셀에 업로드한 이후 셀 위에 마우스를 올리면 마스크 레이어가 표시되며, 이는 새로운 파일을 업로드하기 전에 기존 파일을 제거해야 함을 의미합니다.
아래 이미지는 첫 번째 열이 **File Upload** 셀 유형으로 설정되어 있으며, 학생의 이미지를 업로드한 예시를 보여줍니다.
![fileupload.11e6ac](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/fileupload.11e6ac.becc1c.png)

다음 코드는 File Upload 셀 유형을 설정하는 예제를 보여줍니다.

```javascript
//FileUpload 셀 유형 설정
const fileUpload = new GC.Spread.Sheets.CellTypes.FileUpload();
for (var i = 1; i < 7; i++)
    activeSheet.getCell(i, 0).cellType(fileUpload);
```

[FileUpload](/spreadjs/api/classes/GC.Spread.Sheets.CellTypes.FileUpload) 클래스의 `maxSize` 및 `accept` 메서드를 사용하여 파일의 최대 크기와 형식(포맷) 제한을 지정할 수 있습니다. 또한, 업로드된 파일이 최대 파일 크기를 초과하면 `invalidOperation` 이벤트가 발생합니다.
다음 코드 샘플은 파일의 최대 크기와 형식을 설정하는 방법을 보여줍니다.

```javascript
// 파일의 최대 크기와 허용되는 파일 형식을 설정
fileUpload.maxSize(3072);
fileUpload.accept('image/png, image/jpeg');

// 업로드된 파일이 최대 크기를 초과했을 때 invalidOperation 이벤트를 사용
spread.bind(GC.Spread.Sheets.Events.InvalidOperation, (e, args) => {
    if (args.invalidType === GC.Spread.Sheets.InvalidOperationType.sizeLimitExceeded) {
        alert(args.message);
    }
});
```

## 파일 업로드 작업 사용자 정의

SpreadJS의 파일 업로드 셀 타입에서는 업로드된 이미지에 대해 미리보기, 다운로드, 삭제 작업을 수행할 수 있으며, 일반 파일에 대해서는 다운로드와 삭제 작업을 수행할 수 있습니다. 그러나 SpreadJS에서는 `isPreviewEnabled` 및 `isDownloadEnabled` 메서드를 사용하여 특정 버튼 목록을 숨길 수 있습니다.
아래 이미지는 **미리보기(Preview)** 와 **삭제(Clear)** 작업이 포함된 마스크 레이어를 보여줍니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.a8cdbb.png)
아래의 코드 샘플은 **다운로드** 버튼을 비활성화하는 방법을 보여줍니다.

```javascript
// custom 작업 설정.
buttonfileUpload.isDownloadEnabled(false); 
```

## 기본 파일 아이콘 수정하기

SpreadJS는 최대 크기 20px의 기본 내장 파일 아이콘을 제공합니다. 하지만 이미지가 아닌 파일에 대해서는 `spread` 옵션의 `builtInFileIcons`를 사용해 기본 아이콘을 사용자 정의할 수 있습니다. 사용자 정의 아이콘을 설정할 때는 **key**로 파일 확장자명을 지정하고, **value**로는 base64로 인코딩된 아이콘 이미지를 사용합니다.
아래 이미지는 `.txt` 파일에 대해 사용자 정의된 파일 아이콘을 보여줍니다.
![Modify_BuiltInFileIcons](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/Modify_BuiltInFileIcons.e236a8.png)
`.txt` 파일용 `builtInFileIcons` 옵션을 수정하는 예제 코드는 아래와 같습니다.

```javascript
//.txt 파일 아이콘 사용자 정의
spread.options.builtInFileIcons['txt'] = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAT1JREFUOE9jZGBgYPh5iq2bgYGhBMTGBZglik+zyLWbocszQg34j08zSI5JOJqBkZl/H4vCBGdktTADfjIwMLDhMwRsAIcSw/9frzazKk72g6kl2QCwxl/Pl7MoTosCMYk2gJFDnYFJ0I+BgYkDYvmvZ7NYFKenE20AWNM/ZgYGRla4T9nNPzGSZgBaILGb/Rp2BjDx2jEwCUcx/P/7keH/z7sM/17NYmCWqgH7nJFNhuH/rycMf5+1IAIRWxiw6t9l+H1RmYGRVZyB1eARw99nzQx/n7YwsGjsYvhzww0lGLEGIovyMoY/d6MYGDk1GVjUtzMw/HrC8PuaDQOL2haGP7d8CBvAJBTM8O/dWgZm6RqwzSAvgJwN8t6/z4dwGkAwM2HLJ3Av/DjJ1sXIyFBKKEei5ELG/31spr+LAddTgREw5iFTAAAAAElFTkSuQmCC";
```

>type=warning
> **참고**: FileUpload 셀 타입이 포함된 SpreadJS 인스턴스를 SSJSON 형식으로 내보낼 경우, 업로드된 파일은 base64 데이터로 변환되어 셀에 직접 저장됩니다. 반면에 SJS 형식으로 내보낼 경우, 업로드된 파일은 embedding 디렉터리에 저장됩니다.

## SpreadJS 디자이너 사용하기

SpreadJS 디자이너에서는 다음 경로를 통해 File Upload 셀 타입을 설정할 수 있습니다:
**[홈 탭] → [셀 편집기(Cell Editors)] → [셀 형식(Cell Type)] → [파일 업로드(File Upload)]**
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.b8c1e5.png)

파일 업로드(File Upload)에서는 여백(Margin), 파일 형식(File Type), 크기 제한(Size Limit), 작업(Operations) 등을 설정할 수 있습니다:
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.e1d8d2.png)

또한, **[설정(Settings)] >** **[Spread 설정(Spread Settings)] > [일반(General)]** 에서 기존 파일 아이콘을 선택하거나 새로운 아이콘을 추가할 수 있습니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.3de678.png)