File

A file field links to a file in the media library: a PDF brochure, a price list, a download. Editors pick it from the files uploaded to the media library. For images you want to display, use the Image field: it returns dimensions and a blur placeholder too.

import {Field} from 'alinea'

Field.file('Brochure')

Field.file.multiple('Downloads', {max: 10})

Options

fields: extra fields stored on each link, such as a label or description.
max (multiple only): the maximum number of files.
location and limitLocations: open the picker in, or limit it to, specific media roots or folders, like the Entry field.
defaultView: show the picker as 'thumb' (default) or 'row'.
The common options help, width, inline, initialValue, required, validate, readOnly, hidden and shared.

The picker offers every file in the media library, images included.

Value

Each file is resolved to:

url and href: the url of the file on your site (both hold the same value), such as /admin/file/brochure.pdf. It's served through your Alinea handler and keeps working when the file is moved or renamed.
title: the file's title in the media library.
extension: the file extension including the dot, '.pdf'.
size: the size in bytes.
fields: the values of your extra fields.

A single file field is null while it's empty, a multiple one is an array.

import type {FileLink} from 'alinea'

export function Download({file}: {file: FileLink | null}) {
  if (!file?.href) return null
  const kb = Math.round(file.size / 1024)
  return (
    <a href={file.href} download>
      {file.title} ({file.extension.slice(1).toUpperCase()}, {kb} KB)
    </a>
  )
}