Payload CMS Import-Export Plugin

A PayloadCMS plugin providing custom views for importing and exporting collection data as JSON through the admin UI.

Requirements

Peer dependencies:

"react": "^19.0.0",
"@payloadcms/ui": "^3.33.0"

Installation

npm install @sparrowengg/payloadcms-plugin-import-export
# or
yarn add @sparrowengg/payloadcms-plugin-import-export
# or
pnpm add @sparrowengg/payloadcms-plugin-import-export

Setup

1. Add Server Component Templates

Create payload/views/Import/index.tsx:

import type { AdminViewServerProps } from 'payload';
import { DefaultTemplate } from '@payloadcms/next/templates';
import { Gutter } from '@payloadcms/ui';
import { redirect } from 'next/navigation';
import { ImportClient } from '@sparrowengg/payloadcms-plugin-import-export';

export default function ImportView({
  initPageResult,
  params,
  searchParams,
}: AdminViewServerProps) {
  const user = initPageResult.req.user;
  if (!user) {
    redirect('/admin/login');
  }

  return (
    <DefaultTemplate
      i18n={initPageResult.req.i18n}
      locale={initPageResult.locale}
      params={params}
      payload={initPageResult.req.payload}
      permissions={initPageResult.permissions}
      searchParams={searchParams}
      user={user}
      visibleEntities={initPageResult.visibleEntities}
    >
      {user.roles.includes('admin') ? ( // Configure based on your access control setup
        <Gutter>
          <h1>Import Collections</h1>
          <ImportClient />
        </Gutter>
      ) : (
        <Gutter>
          <div className="text-center">
            <h1>Insufficient Permissions</h1>
            <p>You don&apos;t have permission to access this dashboard.</p>
          </div>
        </Gutter>
      )}
    </DefaultTemplate>
  );
}

Create payload/views/Export/index.tsx:

import type { AdminViewServerProps } from 'payload';
import { DefaultTemplate } from '@payloadcms/next/templates';
import { Gutter } from '@payloadcms/ui';
import { redirect } from 'next/navigation';
import { ExportClient } from '@sparrowengg/payloadcms-plugin-import-export';

export default function Export({
  initPageResult,
  params,
  searchParams,
  payload
}: AdminViewServerProps) {
  const user = initPageResult.req.user;
  if (!user) {
    redirect('/admin/login');
  }

  return (
    <DefaultTemplate
      i18n={initPageResult.req.i18n}
      locale={initPageResult.locale}
      params={params}
      payload={initPageResult.req.payload}
      permissions={initPageResult.permissions}
      searchParams={searchParams}
      user={user}
      visibleEntities={initPageResult.visibleEntities}
    >
      <Gutter>
        <h1>Export Collections</h1>
        <ExportClient collections={Object.keys(payload.collections)}/>
      </Gutter>
    </DefaultTemplate>
  );
}

2. Register the Custom Views

Add to your payload.config.ts:

export default buildConfig({
  admin: {
    components: {
      views: {
        export: {
          Component: '@/payload/views/Export',
          path: '/views/export',
        },
        import: {
          Component: '@/payload/views/Import',
          path: '/views/import',
        },
      },
    },
  },
  // ... rest of your config
});

3. Setup Tailwind CSS

This plugin uses Tailwind CSS for styling. Create payload-tailwind-styles.css and import it in app/(payload)/layout.tsx:

/* Define the Tailwind layers in the correct order */
@layer theme,
base,
components,
utilities;

/* Import the Tailwind theme styles */
@import 'tailwindcss/theme.css' layer(theme);

/* Skip the preflight reset to avoid conflicts with Payload's admin styles */
/* @import 'tailwindcss/preflight.css' layer(base); */

/* Import Tailwind utilities */
@import 'tailwindcss/utilities.css' layer(utilities);

/* Support Payload's dark mode toggle by adding a custom variant */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/* Reset styles that break Payload's admin styles */
.table {
  display: block;
}

/* Include the plugins styles in Tailwind scanning */
/* Give appropriate relative path to node modules */
@source '../../node_modules/@sparrowengg';

4. Regenerate Payload's Importmap

pnpm payload generate:importmap

5. Allow id field overwriting in postgres

Add to your payload.config.ts's postgresAdapter config:

db: postgresAdapter({
    // Your code...
    allowIDOnCreate: true, // Add this
}),

6. Access the Views

Navigate to:

• /admin/views/import - Import collection data
• /admin/views/export - Export collection data

License

MIT