IFileItem
Describes an item that will be embedded in the file list. The file item can be displayed as a file or a folder.
Examples
3D model viewer with format validation
import { IFileItem, Actions, ToastType, Devices } from "@onlyoffice/docspace-plugin-sdk";
const modelViewer: IFileItem = {
extension: ".obj",
fileTypeName: "3D Model",
fileRowIcon: "3d-model-32.svg",
fileTileIcon: "3d-model-96.svg",
devices: [Devices.desktop],
onClick: async (file) => {
try {
await load3DModel(file.id);
return {
actions: [Actions.showToast],
toastProps: [{
type: ToastType.success,
title: "3D model loaded successfully"
}]
};
} catch (error) {
return {
actions: [Actions.showToast],
toastProps: [{
type: ToastType.error,
title: "Unable to process the 3D model"
}]
};
}
}
}
Markdown content processor with error handling
const markdownPreview: IFileItem = {
extension: ".md",
fileTypeName: "Markdown",
fileRowIcon: "markdown-32.svg",
onClick: async (file) => {
try {
const content = await fetchMarkdownContent(file.id);
await saveMarkdown(file.id, content);
return {
actions: [Actions.showToast],
toastProps: [{
type: ToastType.success,
title: "Markdown file processed"
}]
};
} catch (error) {
return {
actions: [Actions.showToast],
toastProps: [{
type: ToastType.error,
title: "Unable to process the markdown file"
}]
};
}
}
}
Audio player with access restrictions
const audioPlayer: IFileItem = {
extension: ".mp3",
fileTypeName: "Audio",
fileRowIcon: "audio-32.svg",
fileTileIcon: "audio-96.svg",
usersType: [UsersType.docSpaceAdmin, UsersType.roomAdmin, UsersType.user],
fileSecurity: [FilesSecurity.Read, FilesSecurity.Download],
onClick: async (file) => {
try {
await playAudio(file.viewUrl);
return {
actions: [Actions.showToast],
toastProps: [{
type: ToastType.success,
title: `Playing ${file.title}`
}]
};
} catch (error) {
return {
actions: [Actions.showToast],
toastProps: [{
type: ToastType.error,
title: "Unable to play the audio file"
}]
};
}
}
}
Properties
| Property | Type | Description |
|---|---|---|
extension | string | The file extension. If several plugins have the same extension, the last plugin from this list is taken |
onClick | (item: File) => void | Promise<void> | IMessage | Promise<IMessage> | A function that takes the File object with the file data as an argument. This function can be asynchronous. It will be executed when the user clicks on a file with the required extension. |
usersType? | UsersType[] | The types of users who have the access to the current item. Currently the following user types are available: owner, docSpaceAdmin, roomAdmin, collaborator, user. If this parameter is not specified, then the current item will be available for all user types. |
devices? | Devices[] | The types of devices where the current item will be available. At the moment the following device types are available: mobile, tablet, desktop. If this parameter is not specified, then the current item will be available in any device types. |
fileTypeName? | string | A file type which is displayed in the list (for example, Document/Folder) |
fileRowIcon? | string | A file icon which is displayed in the table format. The icon image must be uploaded to the assets folder. Only the image name with the extension must be specified in this field. The preferred icon size is 32x32 px. |
fileTileIcon? | string | A file icon which is displayed in the tile format. The icon image must be uploaded to the assets folder. Only the image name with the extension must be specified in this field. The preferred icon size is 96x96 px. |
fileSecurity? | FilesSecurity[] | The security parameters of the file that will be checked. If all the parameters are true, the onClick event will be triggered. If this parameter is not specified, the security settings are ignored. |
security? | Security[] | The security parameters of the parent folder or room that will be checked. If all the parameters are true, the onClick event will be triggered. If this parameter is not specified, the security settings are ignored. |
File
Describes the file properties.