webFileReader

warning

Unstable API: This package is experimental. We might change the API at any time, until we remove this notice.

A reader for @remotion/media-parser that reads from a File object.
It only works in the browser.
Useful if you want to parse a video from a <input type="file"> element.

Example

Reading a local file
tsx
import React, {useCallback} from 'react';
import {parseMedia} from '@remotion/media-parser';
import {webFileReader} from '@remotion/media-parser/web-file';
 
const MyComp: React.FC = () => {
  const onFile = useCallback(async (file: File) => {
    const result = await parseMedia({
      src: file,
      fields: {
        durationInSeconds: true,
        dimensions: true,
      },
      reader: webFileReader,
    });
  }, []);
 
  return (
    <input type="file" onChange={(e) => onFile(e.target.files?.[0]!)} />
  );
}

Reading a local file
tsx
import React, {useCallback} from 'react';
import {parseMedia} from '@remotion/media-parser';
import {webFileReader} from '@remotion/media-parser/web-file';
 
const MyComp: React.FC = () => {
  const onFile = useCallback(async (file: File) => {
    const result = await parseMedia({
      src: file,
      fields: {
        durationInSeconds: true,
        dimensions: true,
      },
      reader: webFileReader,
    });
  }, []);
 
  return (
    <input type="file" onChange={(e) => onFile(e.target.files?.[0]!)} />
  );
}

Example​

Example