Configuration

Options

folderPicker({
  translations: {},
  disabled: false,
})

There is nothing else to set. What the picker applies to is Payload's own configuration: folders: { browseByFolder: true } at the root, and folders: true on each collection that should have them.

disabled exists so an environment can opt out without removing the plugin call:

folderPicker({ disabled: process.env.NODE_ENV === 'test' })

Exports

Rendering the view yourself

A collection that already declares its own list view is skipped. To keep both, render FolderListView from your view:

'use client'

import { FolderListView } from '@10x-media/folder-picker/client'
import type { ListViewClientProps } from 'payload'

export const MyListView: React.FC<ListViewClientProps> = (props) => (
  <FolderListView {...props} />
)

Declaring the component is only half of it. It has to be the collection's list view, which is the same declaration that made the plugin skip the collection in the first place:

export const Media: CollectionConfig = {
  slug: 'media',
  admin: {
    components: {
      views: {
        list: { Component: '/components/MyListView#MyListView' },
      },
    },
  },
  upload: true,
}

When the drawer is not what you expect

A flat list, and the server log says getFromImportMap: PayloadComponent not found. The import map is stale. Run payload generate:importmap and rebuild; see Quick start.

A flat list with nothing in the log. The collection has no folders: true, or it declares its own list view.

The drawer looks wrong after a Payload upgrade. Its header reuses Payload's internal markup and class names, which semver does not cover. Nothing throws and no test catches it, so open a drawer and look at it once.