{"_id":"@10xmedia/payload-folder-picker","_rev":"4-59765191e8e3044b6d07e305008a2060","name":"@10xmedia/payload-folder-picker","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@10xmedia/payload-folder-picker","version":"0.0.1","license":"MIT","_id":"@10xmedia/payload-folder-picker@0.0.1","maintainers":[{"name":"harleysalas","email":"Harley@Harleysalas.com"},{"name":"10xmedia-org","email":"info@10xmedia.de"},{"name":"veiagg","email":"romapalamar.veiag@gmail.com"}],"dist":{"shasum":"d3771293c1fd945818fe656e9229b00931f8879f","tarball":"https://registry.npmjs.org/@10xmedia/payload-folder-picker/-/payload-folder-picker-0.0.1.tgz","fileCount":92,"integrity":"sha512-Nwjs2C5rjsGPYXg7gXmDRPr4FCM/jiihXt+WqFVa2ZVc8ULGLoKbZSggY3lz1FTHj4YSMHCWxJzVqTgvuuq2EQ==","signatures":[{"sig":"MEYCIQDPaJ0zCWdjM3FwgY7HHJffX5ke3B3qhSH/u4J2/3n78wIhAK7o4nYE2dHbwsYpAJ29Eha9xOzVJUqKUnQxAkwH3JXz","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":300510},"main":"./dist/index.js","type":"module","_from":"file:10xmedia-payload-folder-picker-0.0.1.tgz","types":"./dist/index.d.ts","engines":{"node":"^18.20.2 || >=20.9.0","pnpm":"^9 || ^10"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./rsc":{"types":"./dist/exports/rsc.d.ts","import":"./dist/exports/rsc.js","default":"./dist/exports/rsc.js"},"./client":{"types":"./dist/exports/client.d.ts","import":"./dist/exports/client.js","default":"./dist/exports/client.js"}},"scripts":{"dev":"next dev dev --turbo","lint":"eslint","test":"pnpm test:int && pnpm test:e2e","build":"pnpm copyfiles && pnpm build:types && pnpm build:swc","clean":"rimraf {dist,*.tsbuildinfo}","lint:fix":"eslint ./src --fix","test:e2e":"playwright test","test:int":"vitest","build:swc":"swc ./src -d ./dist --config-file .swcrc --strip-leading-paths","copyfiles":"copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/","build:types":"tsc --outDir dist --rootDir ./src","dev:payload":"cross-env PAYLOAD_CONFIG_PATH=./dev/payload.config.ts payload","generate:types":"pnpm dev:generate-types","dev:generate-types":"pnpm dev:payload generate:types","generate:importmap":"pnpm dev:generate-importmap","dev:generate-importmap":"pnpm dev:payload generate:importmap"},"_npmUser":{"name":"veiagg","email":"romapalamar.veiag@gmail.com"},"registry":"https://registry.npmjs.org/","_resolved":"C:\\Users\\romap\\AppData\\Local\\Temp\\4346d3d367831cde36dce453d7556aec\\10xmedia-payload-folder-picker-0.0.1.tgz","_integrity":"sha512-Nwjs2C5rjsGPYXg7gXmDRPr4FCM/jiihXt+WqFVa2ZVc8ULGLoKbZSggY3lz1FTHj4YSMHCWxJzVqTgvuuq2EQ==","_npmVersion":"11.11.0","description":"A folder picker plugin for Payload CMS","directories":{},"_nodeVersion":"25.8.1","dependencies":{"@payloadcms/translations":"3.84.1"},"_hasShrinkwrap":false,"devDependencies":{"next":"16.2.6","open":"^10.1.0","react":"19.2.6","sharp":"0.34.2","eslint":"^9.23.0","qs-esm":"8.0.1","rimraf":"3.0.2","vitest":"4.0.18","graphql":"^16.8.1","payload":"3.84.1","@swc/cli":"0.6.0","prettier":"^3.4.2","copyfiles":"2.4.1","cross-env":"^7.0.3","react-dom":"19.2.6","typescript":"5.7.3","@types/node":"22.19.9","@types/react":"19.2.14","@payloadcms/ui":"3.84.1","@eslint/eslintrc":"^3.2.0","@payloadcms/next":"3.84.1","@playwright/test":"1.58.2","@types/react-dom":"19.2.3","sort-package-json":"^2.10.0","@swc-node/register":"1.10.9","eslint-config-next":"16.2.6","vite-tsconfig-paths":"6.0.5","@payloadcms/db-sqlite":"3.84.1","mongodb-memory-server":"10.1.4","@payloadcms/db-mongodb":"3.84.1","@payloadcms/db-postgres":"3.84.1","@payloadcms/eslint-config":"3.28.0","@payloadcms/richtext-lexical":"3.84.1"},"peerDependencies":{"payload":"^3.84.1"},"_npmOperationalInternal":{"tmp":"tmp/payload-folder-picker_0.0.1_1781026353333_0.8651896269876986","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@10xmedia/payload-folder-picker","version":"0.0.2","license":"MIT","_id":"@10xmedia/payload-folder-picker@0.0.2","maintainers":[{"name":"harleysalas","email":"Harley@Harleysalas.com"},{"name":"10xmedia-org","email":"info@10xmedia.de"},{"name":"veiagg","email":"romapalamar.veiag@gmail.com"}],"dist":{"shasum":"9db8674018d846cced08df76c554803da6365dd3","tarball":"https://registry.npmjs.org/@10xmedia/payload-folder-picker/-/payload-folder-picker-0.0.2.tgz","fileCount":92,"integrity":"sha512-ytefATqUuDeOGvekIX/kv8snv9ww2feZM/MKEvzuaddIgNMLgymmmPIBXhr+pwGCTsqGpSmq39eV8fISrWpbaw==","signatures":[{"sig":"MEQCIE3M6bNuOQEQOTRB5C1IP52EEoMkMnZX3zxnvdt2h//dAiBBMuYPQ7IFLgz7EXhRLmzy/Vjmv/3+twANlUbwVpeMcg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":295063},"main":"./dist/index.js","type":"module","_from":"file:10xmedia-payload-folder-picker-0.0.2.tgz","types":"./dist/index.d.ts","engines":{"node":"^18.20.2 || >=20.9.0","pnpm":"^9 || ^10"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./rsc":{"types":"./dist/exports/rsc.d.ts","import":"./dist/exports/rsc.js","default":"./dist/exports/rsc.js"},"./client":{"types":"./dist/exports/client.d.ts","import":"./dist/exports/client.js","default":"./dist/exports/client.js"}},"scripts":{"dev":"next dev dev --turbo","lint":"eslint","test":"pnpm test:int && pnpm test:e2e","build":"pnpm copyfiles && pnpm build:types && pnpm build:swc","clean":"rimraf {dist,*.tsbuildinfo}","lint:fix":"eslint ./src --fix","test:e2e":"playwright test","test:int":"vitest","build:swc":"swc ./src -d ./dist --config-file .swcrc --strip-leading-paths","copyfiles":"copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/","build:types":"tsc --outDir dist --rootDir ./src","dev:payload":"cross-env PAYLOAD_CONFIG_PATH=./dev/payload.config.ts payload","generate:types":"pnpm dev:generate-types","dev:generate-types":"pnpm dev:payload generate:types","generate:importmap":"pnpm dev:generate-importmap","dev:generate-importmap":"pnpm dev:payload generate:importmap"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:676ba099-0050-432b-8ca3-c83e6dd20154"}},"registry":"https://registry.npmjs.org/","_resolved":"/tmp/5ed12df18c1571779b2377508d370de9/10xmedia-payload-folder-picker-0.0.2.tgz","_integrity":"sha512-ytefATqUuDeOGvekIX/kv8snv9ww2feZM/MKEvzuaddIgNMLgymmmPIBXhr+pwGCTsqGpSmq39eV8fISrWpbaw==","_npmVersion":"11.16.0","description":"A folder picker plugin for Payload CMS","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@payloadcms/translations":"3.84.1"},"_hasShrinkwrap":false,"devDependencies":{"next":"16.2.6","open":"^10.1.0","react":"19.2.6","sharp":"0.34.2","eslint":"^9.23.0","qs-esm":"8.0.1","rimraf":"3.0.2","vitest":"4.0.18","graphql":"^16.8.1","payload":"3.84.1","@swc/cli":"0.6.0","prettier":"^3.4.2","copyfiles":"2.4.1","cross-env":"^7.0.3","react-dom":"19.2.6","typescript":"5.7.3","@types/node":"22.19.9","@types/react":"19.2.14","@payloadcms/ui":"3.84.1","@eslint/eslintrc":"^3.2.0","@payloadcms/next":"3.84.1","@playwright/test":"1.58.2","@types/react-dom":"19.2.3","sort-package-json":"^2.10.0","@swc-node/register":"1.10.9","eslint-config-next":"16.2.6","vite-tsconfig-paths":"6.0.5","@payloadcms/db-sqlite":"3.84.1","mongodb-memory-server":"10.1.4","@payloadcms/db-mongodb":"3.84.1","@payloadcms/db-postgres":"3.84.1","@payloadcms/eslint-config":"3.28.0","@payloadcms/richtext-lexical":"3.84.1"},"peerDependencies":{"payload":"^3.84.1"},"_npmOperationalInternal":{"tmp":"tmp/payload-folder-picker_0.0.2_1781085078292_0.4706167167477908","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@10xmedia/payload-folder-picker","version":"0.0.3","license":"MIT","_id":"@10xmedia/payload-folder-picker@0.0.3","maintainers":[{"name":"harleysalas","email":"Harley@Harleysalas.com"},{"name":"10xmedia-org","email":"info@10xmedia.de"},{"name":"veiagg","email":"romapalamar.veiag@gmail.com"}],"dist":{"shasum":"45b3f1b11715c749f9c30b1b86cde7dda3c03ba4","tarball":"https://registry.npmjs.org/@10xmedia/payload-folder-picker/-/payload-folder-picker-0.0.3.tgz","fileCount":92,"integrity":"sha512-SxE7KwAx8TssdH1kjEgcFT4mo8Hqm71zZ7R99JnZD7LA5RjAW91FaOG/gSQoqREDsqgO8qdy+A3klONyTLpcpQ==","signatures":[{"sig":"MEYCIQDcc7U1y64ytuQdu5hxt00DBAKImjgjVaBmPxxRozMmAAIhALW61ACQkp9fregrVyVYOaFn3B6pUS4HN62iNxlrii/I","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":307170},"main":"./dist/index.js","type":"module","_from":"file:10xmedia-payload-folder-picker-0.0.3.tgz","types":"./dist/index.d.ts","engines":{"node":"^18.20.2 || >=20.9.0","pnpm":"^9 || ^10"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./rsc":{"types":"./dist/exports/rsc.d.ts","import":"./dist/exports/rsc.js","default":"./dist/exports/rsc.js"},"./client":{"types":"./dist/exports/client.d.ts","import":"./dist/exports/client.js","default":"./dist/exports/client.js"}},"scripts":{"dev":"next dev dev --turbo","lint":"eslint","test":"pnpm test:int && pnpm test:e2e","build":"pnpm copyfiles && pnpm build:types && pnpm build:swc","clean":"rimraf {dist,*.tsbuildinfo}","lint:fix":"eslint ./src --fix","test:e2e":"playwright test","test:int":"vitest","build:swc":"swc ./src -d ./dist --config-file .swcrc --strip-leading-paths","copyfiles":"copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/","build:types":"tsc --outDir dist --rootDir ./src","dev:payload":"cross-env PAYLOAD_CONFIG_PATH=./dev/payload.config.ts payload","generate:types":"pnpm dev:generate-types","dev:generate-types":"pnpm dev:payload generate:types","generate:importmap":"pnpm dev:generate-importmap","dev:generate-importmap":"pnpm dev:payload generate:importmap"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:676ba099-0050-432b-8ca3-c83e6dd20154"}},"registry":"https://registry.npmjs.org/","_resolved":"/tmp/3fe9ecc41736e0d08e0603bc5e5fb60d/10xmedia-payload-folder-picker-0.0.3.tgz","_integrity":"sha512-SxE7KwAx8TssdH1kjEgcFT4mo8Hqm71zZ7R99JnZD7LA5RjAW91FaOG/gSQoqREDsqgO8qdy+A3klONyTLpcpQ==","_npmVersion":"11.16.0","description":"A folder picker plugin for Payload CMS","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@payloadcms/translations":"3.84.1"},"_hasShrinkwrap":false,"devDependencies":{"next":"16.2.6","open":"^10.1.0","react":"19.2.6","sharp":"0.34.2","eslint":"^9.23.0","qs-esm":"8.0.1","rimraf":"3.0.2","vitest":"4.0.18","graphql":"^16.8.1","payload":"3.84.1","@swc/cli":"0.6.0","prettier":"^3.4.2","copyfiles":"2.4.1","cross-env":"^7.0.3","react-dom":"19.2.6","typescript":"5.7.3","@types/node":"22.19.9","@types/react":"19.2.14","@payloadcms/ui":"3.84.1","@eslint/eslintrc":"^3.2.0","@payloadcms/next":"3.84.1","@playwright/test":"1.58.2","@types/react-dom":"19.2.3","sort-package-json":"^2.10.0","@swc-node/register":"1.10.9","eslint-config-next":"16.2.6","vite-tsconfig-paths":"6.0.5","@payloadcms/db-sqlite":"3.84.1","mongodb-memory-server":"10.1.4","@payloadcms/db-mongodb":"3.84.1","@payloadcms/db-postgres":"3.84.1","@payloadcms/eslint-config":"3.28.0","@payloadcms/richtext-lexical":"3.84.1"},"peerDependencies":{"payload":"^3.84.1"},"_npmOperationalInternal":{"tmp":"tmp/payload-folder-picker_0.0.3_1781172936534_0.783380812203663","host":"s3://npm-registry-packages-npm-production"},"deprecated":"This package is deprecated and no longer maintained. Use @10x-media/folder-picker instead: https://github.com/10x-media/payload-plugins"}},"time":{"created":"2026-06-09T17:32:33.217Z","modified":"2026-09-28T11:17:35.055Z","0.0.1":"2026-06-09T17:32:33.578Z","0.0.2":"2026-06-10T09:51:18.443Z","0.0.3":"2026-06-11T10:15:36.698Z"},"license":"MIT","description":"A folder picker plugin for Payload CMS","maintainers":[{"name":"10xmedia-org","email":"info@10xmedia.de"},{"name":"harleysalas","email":"Harley@Harleysalas.com"},{"name":"veiagg","email":"romapalamar.veiag@gmail.com"}],"readme":"![Banner](assets/banner.jpg)\n\n# @10xmedia/payload-folder-picker\n\nA [Payload CMS](https://payloadcms.com) plugin that replaces the default upload field UI with a folder-aware file picker. Users browse their folder hierarchy directly inside a drawer, navigate into subfolders, search, and select files — without leaving the document they are editing.\n\n> [!NOTE]\n> Early release (v0.0.1) — core functionality is stable but edge cases may not be fully covered. Bug reports and contributions are welcome.\n\n\n## Requirements\n\n- Payload CMS **3.x**\n- Folders must be enabled in your Payload config (`folders: { ... }` at the root level)\n- At least one collection must have `folders: true`\n\n## Installation\n\n```bash\nnpm install @10xmedia/payload-folder-picker\n# or\npnpm add @10xmedia/payload-folder-picker\n```\n\n# Demo\n\n**Single upload field** — browse folders and select a single file.\n\nhttps://github.com/user-attachments/assets/d6200827-a1bc-40e6-96b8-3607cfa37306\n\n**Multiple upload field (`hasMany`)** — select multiple files across folders.\n\nhttps://github.com/user-attachments/assets/d6357407-de25-436f-bfab-efcfe237777b\n\n**Polymorphic field (single)** — pick from multiple folder-enabled collections in one field.\n\nhttps://github.com/user-attachments/assets/91503262-a24f-45b2-8fc1-c28d57f6b0e0\n\n**Polymorphic field (hasMany)** — select multiple files from multiple collections.\n\nhttps://github.com/user-attachments/assets/bc408c45-804d-4ae4-8294-3b469c4ff8a3\n\n**Lexical rich text** — folder picker replaces the native upload node picker inside the editor.\n\nhttps://github.com/user-attachments/assets/e7184cb1-21f2-42ce-b632-0bd10b044454\n\n## Setup\n\n### 1. Add the plugin to your Payload config\n\n```ts\n// payload.config.ts\nimport { payloadFolderPicker } from '@10xmedia/payload-folder-picker'\n\nexport default buildConfig({\n  folders: {\n    browseByFolder: true,\n  },\n  collections: [\n    {\n      slug: 'media',\n      upload: true,\n      folders: true, // enables folder support for this collection\n      fields: [],\n    },\n  ],\n  plugins: [payloadFolderPicker({})],\n})\n```\n\nThe plugin automatically patches every `upload` field in every collection whose `relationTo` includes at least one folder-enabled collection. No manual field changes are required.\n\n### 2. (Optional) Enable the folder picker inside Lexical rich text\n\nTo replace the native upload picker inside Lexical editor nodes, add `FolderUploadOverrideFeature` to your editor's feature list. Import it from the `/rsc` entry point (server-only).\n\n```ts\n// payload.config.ts\nimport { lexicalEditor } from '@payloadcms/richtext-lexical'\nimport { FolderUploadOverrideFeature } from '@10xmedia/payload-folder-picker/rsc'\n\nexport default buildConfig({\n  editor: lexicalEditor({\n    features({ defaultFeatures }) {\n      return [...defaultFeatures, FolderUploadOverrideFeature()]\n    },\n  }),\n  // ...\n})\n```\n\nAfter adding the feature, run the import map generator so Payload registers the new client component:\n\n```bash\npnpm payload generate:importmap\n```\n\n## How it works\n\nThe plugin follows an **opt-out** approach: it patches **all** upload fields by default, and you disable it selectively where you don't want it.\n\nFor each `upload` field, the plugin checks whether any of the field's `relationTo` slugs belong to a folder-enabled collection. If at least one does, the field's admin component is replaced with the folder picker UI. If none do, the field is left untouched.\n\n## Opting out\n\n### On a single field\n\nAdd `custom: { disableFolderPicker: true }` directly to any upload field:\n\n```ts\n{\n  name: 'thumbnail',\n  type: 'upload',\n  relationTo: 'media',\n  custom: {\n    disableFolderPicker: true,\n  },\n}\n```\n\n### On a container field (group, tab, row, etc.)\n\nSetting `disableFolderPicker` on a parent container opts out all upload fields nested inside it. This works for `group`, `row`, `collapsible`, `tabs`, `blocks`, and any other field type that contains child fields:\n\n```ts\n{\n  name: 'legacyMedia',\n  type: 'group',\n  custom: {\n    disableFolderPicker: true,\n  },\n  fields: [\n    {\n      name: 'image',\n      type: 'upload',\n      relationTo: 'media',\n    },\n    {\n      name: 'video',\n      type: 'upload',\n      relationTo: 'media',\n      hasMany: true,\n    },\n  ],\n}\n```\n\nBoth `image` and `video` above will keep the native Payload upload UI.\n\n## Polymorphic upload fields\n\nUpload fields with multiple `relationTo` slugs (polymorphic) are supported. However, only **folder-enabled collections** are shown in the picker. Collections that do not have `folders: true` are silently excluded from the drawer's browsable collections — they cannot be browsed or selected through the folder picker.\n\n```ts\n// 'media' and 'files' have folders: true → shown in the folder picker\n// 'attachments' does not have folders: true → excluded from the picker\n{\n  name: 'asset',\n  type: 'upload',\n  relationTo: ['media', 'files', 'attachments'],\n}\n```\n\nIf none of the `relationTo` slugs belong to folder-enabled collections, the field is not patched at all and keeps the default Payload UI.\n\n## Files without an assigned folder\n\nFiles that have not been assigned to any folder will **not appear** in the picker drawer. This matches Payload's own native folder-browse behavior — the built-in \"Browse by Folder\" view also hides unassigned files. To make a file selectable via the folder picker, assign it to a folder first through the media library.\n\n## Plugin options\n\n```ts\npayloadFolderPicker({\n  disabled?: boolean // set to true to disable the plugin entirely (e.g. in certain environments)\n})\n```\n\n## Exports\n\n| Entry point | Contents |\n|---|---|\n| `@10xmedia/payload-folder-picker` | `payloadFolderPicker` plugin function |\n| `@10xmedia/payload-folder-picker/rsc` | `FolderUploadOverrideFeature` (server-only, for Lexical) |\n| `@10xmedia/payload-folder-picker/client` | `FolderPickerField`, `FolderPickerInput`, `FolderUploadOverrideFeatureClient` |\n","readmeFilename":"README.md"}