File Upload Cell

SpreadJS provides File Upload cell type which allows you to upload any file or image. For images to be uploaded, it accepts .jpg, .jpeg, .png, .gif, .bmp, .svg, .ico, .webp formats. SpreadJS stores these uploaded files in the form of objects.

By default, the default upload button appears in the File Upload cell type, however, on uploading an image it displays a thumbnail of the image, and on uploading any other file, it displays a file icon associated with the file extension along with the name of the file.

Once a file or an image is uploaded in the File Upload cell type, a mask layer appears on hovering over the cell which implies existing files must be removed before uploading a new file.

The following image displays the first column as the File Upload cell type where we have uploaded a student’s image.

Refer to the following code sample to set the File Upload cell type.

// Set FileUpload celltype.
const fileUpload = new GC.Spread.Sheets.CellTypes.FileUpload();
for (var i = 1; i < 7; i++)
    activeSheet.getCell(i, 0).cellType(fileUpload);

You can specify the maximum file size and the type(format) limit by using the maxSize and accept methods of the FileUpload class. And, if the uploaded file exceeds the maximum file size, an invalidOperation event is triggered.

Refer to the following code sample to set the max size and file type of a file.

// Set File's max size and file type limit.
fileUpload.maxSize(3072);
fileUpload.accept('image/png, image/jpeg');

// Use invalidOperation event if uploaded file exceeds the maximum file size.
spread.bind(GC.Spread.Sheets.Events.InvalidOperation, (e, args) => {
    if (args.invalidType === GC.Spread.Sheets.InvalidOperationType.sizeLimitExceeded) {
        alert(args.message);
    }
});

Customize FileUpload Operations

You can perform preview, download, and clear operations on the uploaded images and download and clear operations for uploaded files in the File Upload cell type. However, SpreadJS allows you to hide the specific button list using isPreviewEnabled and isDownloadEnabled methods.

The following image depicts the mask layer with Preview and Clear operations.

Refer to the following code sample to disable the Download button.

// Set custom operations.
buttonfileUpload.isDownloadEnabled(false); 

Modify the Built-in File Icons

SpreadJS provides default built-in file icons with a maximum size of 20px. However, it allows you to modify the built-in file icons for non-image files using the builtInFileIcons spread option. When setting custom built-in file icons, the key is the file extension, and the value is the base64 encoded string of the file.

The following image depicts a customized file icon for a text file.

Refer to the following code sample for modifying builtInFileIcons option for a .txt file.

// Customize .txt file icon.
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";

Note: When a SpreadJS instance containing a FileUpload cell type is exported to SSJSON format, the uploaded file is converted to base64 data and stored in cells directly, whereas when it is exported to the SJS format, the uploaded file is stored in the embedding’s directory.

Using SpreadJS Designer

You can set the File Upload cell type using SpreadJS Designer by selecting the Cell Editors > Cell Type > File Upload option from the Styles tab.

Use File Upload tab to set the Margin, File Type, Size Limit, and Operations.

You can also add a new icon or select an existing file icon from the Settings > General option from the Spread Settings dialog.