File

Displays a file with its name, size, and type, along with download and preview capabilities. Useful for showing documents, reports, or any downloadable content in a flow.

ctx.ui.display.file({ file, title });

Config

file*

File

The file to display. This must be a Keel File object, typically retrieved from a model field or created using InlineFile.

title

string

Optional display title for the file. If not provided, the file's original filename is used.

Display

The file component shows:

Filename - The title or original filename
File type - Human-readable format (e.g., "PDF", "PNG", "CSV")
File size - Formatted size (B, KB, MB, or GB)
Download button - Direct download link
Preview button - For supported file types (images and PDFs)

Usage

Use file elements to present downloadable content such as reports, invoices, or exported data.

ctx.ui.page({
  title: "Order details",
  content: [
    ctx.ui.display.file({
      file: order.invoice,
      title: "Invoice",
    }),
  ],
});

Displaying generated files

Files created during a flow can also be displayed. Use InlineFile to create a file, then store() to persist it before displaying.

import { InlineFile } from "@teamkeel/sdk";
 
export default MyFlow(async (ctx) => {
  // Generate report content
  const reportData = await generateReport();
  
  // Create and store the file
  const file = new InlineFile({
    filename: "report.csv",
    contentType: "text/csv",
  });
  file.write(Buffer.from(reportData));
  const storedFile = await file.store();
  
  // Display the file
  await ctx.ui.page({
    title: "Report ready",
    content: [
      ctx.ui.display.file({
        file: storedFile,
        title: "Monthly sales report",
      }),
    ],
  });
});

ERP example: Displaying an invoice PDF

A common use case is displaying generated invoices or shipping documents in operational workflows.

export default ViewOrder(async (ctx, inputs) => {
  const order = await models.order.findOne({
    where: { id: inputs.orderId },
  });
 
  await ctx.ui.page({
    title: `Order ${order.reference}`,
    content: [
      ctx.ui.display.keyValue({
        data: [
          { key: "Customer", value: order.customerName },
          { key: "Status", value: order.status },
          { key: "Total", value: `$${order.total.toFixed(2)}` },
        ],
      }),
      ctx.ui.display.file({
        file: order.invoicePdf,
        title: `Invoice ${order.invoiceNumber}`,
      }),
    ],
  });
});

Supported preview types

The file component supports in-browser preview for:

File type	Preview support
Images (PNG, JPEG, GIF, SVG)	Full preview with zoom
PDF documents	Embedded PDF viewer
Other file types	Download only

For unsupported file types, users can still download the file directly.

Display.divider Display.grid