Chapter 354: getStaticFiles()

Core Idea

Gets an array containing all files in the public/ folder. You can reference them by using staticFile().

Key Concepts

• API
• Maximum files
• See also

Code Examples

const files = getStaticFiles();
/*
[
  {
    "name": "video.mp4",
    "src": "/static-7n5spa/video.mp4",
    "sizeInBytes": 432944,
    "lastModified": 1670170466865
  },
  {
    "name": "assets/data.json",
    "src": "/static-7n5spa/assets/data.json",
    "sizeInBytes": 1311,
    "lastModified": 1670170486089
  },
]
*/

// ❗ Don't pass the `name` directly to the `src` of a media element
const videoName = files[0].name;

// ✅ Wrap it in staticFile() instead or use `src`
const videoSrc = files[0].src;

// Find a file by its name and import it
const data = files.find((f) => {
  return f.name === 'video.mp4';
}) as StaticFile; // Use `as StaticFile` to assert the file exists

// Use the `src` property to get a src to pass to a media element
<Video src={data.src} />;

• What it demonstrates: Usage pattern for getStaticFiles() from the official docs.

Key Takeaways

1. Understand api when working with getStaticFiles().
2. Understand maximum files when working with getStaticFiles().
3. Understand see also when working with getStaticFiles().

Connects To

• Clipper: related page in the Studio, Player & Editing section.
• Design Systems: related page in the Studio, Player & Editing section.
• Editor Starter: related page in the Studio, Player & Editing section.