To create a file upload cell, follow this example:
You can use the valuePath property to customize your cell value path. The default value is 'dataUrl'.
You can customize your Button using the many provided APIs. If you want to control the button's position in the cell, use the following methods.
marginTop: Gets or sets the button's top margin in pixels relative to the cell.
marginRight: Gets or sets the button's right margin in pixels relative to the cell.
marginBottom: Gets or sets the button's bottom margin in pixels relative to the cell.
marginLeft: Gets or sets the button's left margin in pixels relative to the cell.
You can use the maxSize method to get and set the button's content. Use the accept method to get and set the button's background color. For example:
If you want to control the file upload button's operation list in the cell, use the following methods.
isPreviewEnabled: Gets or sets whether to display the file preview button.
isDownloadEnabled: Gets or sets whether to display the file download button.
isClearEnabled: Gets or sets whether to display the file clear button.
You can use the previewCommand property to customize your preview logic.
Finally, You can use the builtInFileIcons property to customize the icons for different file type.
import { builtInFileIcons, demoFiles } from './utils.js';
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
const spread = new spreadNS.Workbook(document.getElementById("ss"), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
const sheet = spread.getActiveSheet();
initLayout(sheet);
// set cell type
const fileUpload1 = new spreadNS.CellTypes.FileUpload();
fileUpload1.accept('.jpg,.png,.gif');
fileUpload1.valuePath(undefined);
sheet.getCell(1, 0).cellType(fileUpload1);
const fileUpload2 = new spreadNS.CellTypes.FileUpload();
fileUpload2.isDownloadEnabled(false);
fileUpload2.isClearEnabled(false);
fileUpload2.valuePath(undefined);
sheet.getCell(1, 1).cellType(fileUpload2);
const fileUpload3 = new spreadNS.CellTypes.FileUpload();
sheet.getCell(1, 4).cellType(fileUpload3);
fileUpload3.valuePath(undefined);
sheet.getCell(2, 4).cellType(fileUpload3);
const fileUpload4 = new spreadNS.CellTypes.FileUpload();
fileUpload4.isDownloadEnabled(false);
fileUpload4.valuePath(undefined);
sheet.getCell(1, 5).cellType(fileUpload4);
const fileUpload5 = new spreadNS.CellTypes.FileUpload();
fileUpload5.isClearEnabled(false);
fileUpload5.valuePath(undefined);
sheet.getCell(2, 5).cellType(fileUpload5);
// set cell value
sheet.setValue(1, 0, demoFiles.image);
sheet.setValue(1, 1, demoFiles.image);
sheet.setValue(1, 4, demoFiles.ssjson);
sheet.setValue(2, 4, demoFiles.json);
sheet.setValue(1, 5, demoFiles.js);
sheet.setValue(2, 5, demoFiles.xlsx);
// set custom file icons
spread.options.builtInFileIcons = builtInFileIcons;
spread.resumePaint();
};
function initLayout(sheet) {
// Description
sheet.addSpan(0, 0, 1, 3, spreadNS.SheetArea.viewport);
sheet.addSpan(0, 4, 1, 7, spreadNS.SheetArea.viewport);
sheet.setColumnWidth(0, 70);
sheet.setColumnWidth(1, 70);
sheet.setColumnWidth(2, 200);
sheet.setColumnWidth(4, 100);
sheet.setColumnWidth(5, 100);
sheet.setRowHeight(0, 50);
sheet.setRowHeight(1, 70);
sheet.setRowHeight(2, 70);
sheet.setDefaultValue(0, 0, '1. Upload image files and customize file operations.');
sheet.setDefaultValue(0, 4, '2. Upload other non-image format files and customize the icons of related files.');
const style = new spreadNS.Style();
style.font = 'bold Calibri 14px';
style.vAlign = spreadNS.VerticalAlign.center;
sheet.getRange(0, 0, 1, 11).setStyle(style);
const style2 = new spreadNS.Style();
style2.vAlign = spreadNS.VerticalAlign.center;
style2.hAlign = spreadNS.HorizontalAlign.center;
sheet.getRange(1, 4, 2, 2).setStyle(style2);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script type="module" src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" style="width:100%; height: 100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
