File picker (EAP)

UI components for Forge Object Store are now available as part of our Early Access Program (EAP). These components can also be used for remote object store back-ends. To start testing, sign up here.

By signing up for this Early Access Program (“EAP”), you acknowledge that use of the Forge Object Store UI Components is governed by the Atlassian Developer Terms. The Forge Object Store UI Components are considered “Early Access Materials”, as set forth in Section 10 of the Atlassian Developer Terms and is subject to applicable terms, conditions, and disclaimers.

For more details, see Forge EAP, Preview, and GA.

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).

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"
    />
  );
};