ContextQMD
Back to Remotion

getStaticFiles()

packages/docs/docs/studio/get-static-files.mdx

4.0.4662.3 KB
Original Source

getStaticFiles()<AvailableFrom v="4.0.144"/>

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

:::note This API is being moved from the <code>remotion</code> package.
Prefer this API over the old one. :::

:::note In environments outside the Remotion Studio, this API returns an empty array.
:::

:::note On Linux, watching for changes in subdirectories is only supported from Node.js v19.1.0. If you use a version earlier than that, you need to refresh the Remotion Studio browser tab manually. :::

tsx
import {getStaticFiles, StaticFile} from '@remotion/studio';
import {Video} from '@remotion/media';

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 it's 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} />;

API

Takes no arguments and returns an array of object, each of which have four entries:

  • name: The path relative to the public folder. :::note Contains forward slashes / even on Windows. :::note

  • src: The path with a prefix. The prefix changes whenever the Studio server restarts.

  • sizeInBytes: The file size. If it is a symbolic link, the file size of the original is reported.

  • lastModified: Last modified date in Unix timestamp in milliseconds.

Maximum files

For performance, only the first 10000 items are fetched and displayed.

See also