ファイルアップロード型セル

SpreadJS には、任意のファイルまたは画像をアップロードできるファイルアップロード型セルが用意されています。アップロードする画像には、.jpg、.jpeg、.png、.gif、.bmp、.svg、.ico、.webp 形式が使用できます。SpreadJS は、アップロードされたこれらのファイルをオブジェクトの形式で保存します。

デフォルトでは、ファイルアップロード型セルにはアップロードボタンが表示されますが、画像ファイルをアップロードした場合は、画像のサムネイルが表示され、その他のファイルをアップロードした場合は、ファイル拡張子に関連付けられたアイコンとファイル名が表示されます。

ファイルアップロード型セルでファイルまたは画像をアップロードした場合、セルの上にマウスを移動するとマスク レイヤーが表示され、新しいファイルをアップロードする前に、既存のファイルを削除する必要があることを示します。

次の画像では、最初の列がファイルアップロード型セルとして設定されており、そこに生徒の画像をアップロードしています。

ファイルアップロード型セルを設定する方法は、次のコード サンプルを参照してください。

// ファイルアップロード型セルを設定します。
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 では、isPreviewEnabled メソッドと isDownloadEnabled メソッドを使用して、特定の操作を無効にすることができます。

次の画像は、プレビューとクリア操作を行うマスク レイヤーを示しています。

ダウンロード操作を無効にするには、次のコード サンプルを参照してください。

// ファイルのダウンロード操作を無効にします。
buttonfileUpload.isDownloadEnabled(false); 

組み込みのファイルアイコンの変更

SpreadJS には、最大サイズが 20 ピクセルのデフォルトの組み込みアイコンが用意されています。ただし、builtInFileIcons オプションを使用して、画像以外のファイルの組み込みアイコンを変更できます。カスタムの組み込みアイコンを設定する場合、キーはファイル拡張子で、値はファイルの base64 エンコードされた文字列を設定します。

次の画像は、テキスト ファイルのカスタマイズされたファイル アイコンを示しています。

.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 インスタンスを SSJSON 形式にエクスポートすると、アップロードされたファイルは base64 データに変換され、セルに直接保存されますが、SJS 形式にエクスポートすると、アップロードされたファイルは埋め込みのディレクトリに保存されます。

SpreadJSデザイナの使用

SpreadJS デザイナを使用してファイルアップロード型セルを設定するには、[スタイル] グループから [セル エディター] > [セル型] > [ファイル アップロード] を選択します。

ファイルアップロード ダイアログを使用して、余白、ファイル タイプ、最大ファイルサイズ、および許可する操作を設定します。

また、スプレッド設定ダイアログの「設定 > 全般」オプションから新しいアイコンを追加したり、既存のファイル アイコンを選択したりすることもできます。