파일 업로드 셀

SpreadJS는 파일 업로드 셀 유형(File Upload cell type)을 제공하여 이미지나 파일을 업로드할 수 있도록 지원합니다. 이미지 업로드의 경우, .jpg, .jpeg, .png, .gif, .bmp, .svg, .ico, .webp 형식을 허용합니다. SpreadJS는 이러한 업로드된 파일들을 객체(object) 형태로 저장합니다.

기본적으로, File Upload 셀 유형에는 기본 업로드 버튼이 표시되며, 이미지를 업로드하면 이미지의 썸네일이 표시되고, 그 외의 파일을 업로드하면 파일 확장자에 해당하는 아이콘과 파일 이름이 표시됩니다.

파일이나 이미지를 File Upload 셀에 업로드한 이후 셀 위에 마우스를 올리면 마스크 레이어가 표시되며, 이는 새로운 파일을 업로드하기 전에 기존 파일을 제거해야 함을 의미합니다.

아래 이미지는 첫 번째 열이 File Upload 셀 유형으로 설정되어 있으며, 학생의 이미지를 업로드한 예시를 보여줍니다.

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

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

FileUpload 클래스의 maxSize 및 accept 메서드를 사용하여 파일의 최대 크기와 형식(포맷) 제한을 지정할 수 있습니다. 또한, 업로드된 파일이 최대 파일 크기를 초과하면 invalidOperation 이벤트가 발생합니다.

다음 코드 샘플은 파일의 최대 크기와 형식을 설정하는 방법을 보여줍니다.

// 파일의 최대 크기와 허용되는 파일 형식을 설정
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) 작업이 포함된 마스크 레이어를 보여줍니다.

아래의 코드 샘플은 다운로드 버튼을 비활성화하는 방법을 보여줍니다.

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

기본 파일 아이콘 수정하기

SpreadJS는 최대 크기 20px의 기본 내장 파일 아이콘을 제공합니다. 하지만 이미지가 아닌 파일에 대해서는 spread 옵션의 builtInFileIcons를 사용해 기본 아이콘을 사용자 정의할 수 있습니다. 사용자 정의 아이콘을 설정할 때는 key로 파일 확장자명을 지정하고, value로는 base64로 인코딩된 아이콘 이미지를 사용합니다.

아래 이미지는 .txt 파일에 대해 사용자 정의된 파일 아이콘을 보여줍니다.

.txt 파일용 builtInFileIcons 옵션을 수정하는 예제 코드는 아래와 같습니다.

//.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";

SpreadJS 디자이너 사용하기

SpreadJS 디자이너에서는 다음 경로를 통해 File Upload 셀 타입을 설정할 수 있습니다:

[홈 탭] → [셀 편집기(Cell Editors)] → [셀 형식(Cell Type)] → [파일 업로드(File Upload)]

파일 업로드(File Upload)에서는 여백(Margin), 파일 형식(File Type), 크기 제한(Size Limit), 작업(Operations) 등을 설정할 수 있습니다:

또한, [설정(Settings)] > [Spread 설정(Spread Settings)] > [일반(General)] 에서 기존 파일 아이콘을 선택하거나 새로운 아이콘을 추가할 수 있습니다.