Val

Overview

File Directory Schema

s.filedir(dir, options)

A directory of files that is the whole module - the same idea as s.imagedir(), for any file type rather than images. Where s.file() defines a single field, s.filedir() defines a module that holds many files at once, keyed by their file path.

The content is a record: each key is the path of a file in the collection's directory, and each value is the mimeType Val read off that file. Entries appear when a file is uploaded through Val Studio, the CLI or the VS Code extension - you do not write them by hand.

Fields elsewhere pick from a collection with s.file(collectionModule), the same way s.image(galleryModule) picks from an image gallery.

Like image galleries, file collections are listed under Media in Val Studio rather than in the Explorer file tree.

For fonts, use s.fontdir(): an s.filedir() that accepts only font types. Val Studio previews any file whose mimeType is a font, in either.

Upgrading? s.filedir() replaces s.fileset({ dir, ...options }), which still works but is deprecated. Move dir out of the options and into the first argument; nothing else changes.

See: /docs/files, /docs/api/schema/file, /docs/api/schema/fontdir, /docs/api/schema/imagedir, /docs/remote

Options:

dir (first argument): "/public" | `/public/${string}`

Required. Where the files in this collection are stored. Must start with /public. Two collections may not claim the same directory. The options below go in an object after it.

s.filedir("/public/val/documents", { accept: "*/*" })

accept: string

Required. Which file types the collection accepts. A comma-separated list of one or more MIME types, or unique file type specifiers.

s.filedir("/public/val/documents", { accept: "application/pdf" })

Methods:

.remote: method

Store the files of this collection on Val's remote server instead of in your git repository. See the remote files guide.

s.filedir("/public/val/documents", { accept: "application/pdf" }).remote()

Examples:

Defining a file collection

content/documents.val.ts

import { c, s } from "../val.config";

// A collection is the entire module - the schema is not wrapped in an object
export default c.define(
  "/content/documents.val.ts",
  s.filedir("/public/val/documents", { accept: "application/pdf" }),
  {
    // Entries are added when you upload a file. They are keyed by file path.
    "/public/val/documents/report_a1b2c.pdf": {
      mimeType: "application/pdf",
    },
  },
);

Picking a file from the collection

content/page.val.ts

import { c, s } from "../val.config";
import documentsVal from "./documents.val";

export default c.define(
  "/content/page.val.ts",
  s.object({
    title: s.string(),
    // Pass the collection module to s.file() to pick from it
    datasheet: s.file(documentsVal),
  }),
  {
    title: "Product page",
    // Only the path: the mimeType lives in the collection
    datasheet: { path: "/public/val/documents/report_a1b2c.pdf" },
  },
);

A remote file collection

content/remoteDocuments.val.ts

export default c.define(
  "/content/remoteDocuments.val.ts",
  s
    .filedir("/public/val/remote-documents", { accept: "application/pdf" })
    .remote(),
  {},
);

A font directory

content/fonts.val.ts

import { c, s } from "../val.config";

// s.fontdir() is an s.filedir() for fonts: accept defaults to the web font formats
export default c.define("/content/fonts.val.ts", s.fontdir("/public/val/fonts"), {
  "/public/val/fonts/inter_a1b2c.woff2": {
    mimeType: "font/woff2",
  },
});