Files
Widget FileList is a UI component that displays a collection of files or documents in a structured list.
Demo
Usage
vue
<FilesWidget v-bind="files" />ts
interface IFileList {
title: string;
view: 'grid' | 'list' | 'table';
files: IFile[];
maxHeight?: number; // optional parameter for height of the scrollable area
}
interface IFile {
id: string;
entityId: string; // ID of the related post, file, or item
entityType: 'post' | 'file' | 'product' | 'custom'; // type of linked entity
name: string;
path: string; // file system or URL path
size: number; // in bytes
type: string; // MIME type (e.g., "application/pdf")
author: string; // who uploaded or created the file
description?: string; // optional short description of the file
keywords?: string[]; // tags or search keywords
version: number; // file version for tracking changes
status: 'active' | 'archived' | 'deleted';
createdAt: Date;
updatedAt?: Date; // optional for edits
}Key features:
- Shows file names, types, sizes, and dates.
- Can include icons or previews for each file.
- Often supports sorting, filtering, or searching.
- May include actions (download, delete, rename).
- Can connect to an API or cloud storage to fetch files dynamically.
Common use cases:
- Document management systems.
- Admin panels for media/file uploads.
- Cloud storage dashboards.
- Project management tools showing attached files.