File picker (Preview)

To add the FilePicker component to your app:

1
2
import { FilePicker } from "@forge/react";

Description

The file picker allows the user to select files stored locally.

You can use the file card component to display selected files (along with information about each file and upload progress).

Example app

We published a sample app to demonstrate the basics of implementing object storage features in a Forge app. This sample app uses the Forge Object Store as its backend and available Forge UI components for its frontend. Refer to the app's README for additional guidance on exploring and testing the code.

Explore sample app object storage features

Props

Name	Type	Required	Description
`description`	`string`	No	Additional helper text shown below the file picker to guide users.
`label`	`string`	No	Label displayed above the file picker.
`onChange`	`(files: SerializedFile[]) => void`	No	Callback triggered when files are selected; receives an array of serialized files.

Examples

Default

The onChange property receives an array of serialized files and can be used to manage the selected files:

1
2
type SerializedFile = {
  data: string;
  name: string;
  size: number;
  type: string;
}

Example image of file picker

1
2
export const FilePickerExample = () => {
  const [files, setFiles] = useState([]);

  const onChange = (files) => {
    const unserializedFiles = ...
    setFiles(unserializedFiles);
  };

  return <FilePicker onChange={onChange} />;
};

Additional Elements

Use label to display text above the file picker input zone, helping users identify the purpose of the field. Use description to provide additional helper text (for example, allowed file types or size limits).

Example image of file picker with additional elements

1
2
const FilePickerWithElementsExample = () => {
  return (
    <FilePicker 
      label="Attachment"
      description="Hint text for file requirements"
    />
  );
};