Upload Feature not working with Lexical Editor in Payload v3

[anasmohammed361]

Describe the Bug

This is my Blog Collection that utilizes the lexical editor

import type { CollectionConfig } from 'payload'
import { adminOrBlogOwner } from './access/adminOrBlogOwner';
import {lexicalHTML } from '@payloadcms/richtext-lexical';
import { loggedin } from './access/loggedin';
import { revalidateTag } from 'next/cache';

export const Blogs: CollectionConfig = {
  slug: 'blogs',
  admin: {
    useAsTitle: 'title',
  },
  hooks:{
    afterChange:[({doc})=>{
      revalidateTag(`blog-${doc.id}`)
      revalidateTag('blogs')
    }]
  },
  access:{
    read:adminOrBlogOwner,
    create:loggedin,
    update:adminOrBlogOwner,
    delete: adminOrBlogOwner,
    
},
  fields: [
    {
      name: 'title',
      label: 'Title',
      type: 'text',
      required: true,
    },
    {
      name: 'description',
      label: 'Description',
      type: 'text',
      required: true,
    },
    {
      name:'bannerImage',
      label: "Banner Image",
      type:"upload",
      required:true,
      relationTo:'media',
      hasMany:false,
      displayPreview:true,
      
    },
    {
      name: 'content',
      label: 'Content',
      type: 'richText',
      required: true,
      
    },
    lexicalHTML('content',{
      name:'content_html',
      storeInDB:true
    }),
    {
      name: 'author',
      label: 'Author',
      type: 'relationship',
      relationTo: 'users',
      required: true,
      hidden:false
    },
  
  ],

}

This is my payload config

import { mongooseAdapter } from '@payloadcms/db-mongodb'
import { HTMLConverterFeature, lexicalEditor, UploadFeature } from '@payloadcms/richtext-lexical'
import path from 'path'
import { buildConfig } from 'payload'
import { fileURLToPath } from 'url'
import sharp from 'sharp'
import { s3Storage } from '@payloadcms/storage-s3'
import { Media } from './collections/Media'
import { env } from './env'
import { Users } from './collections/Users'
import { Blogs } from './collections/Blogs'

const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

export default buildConfig({
  admin: {
    user: Users.slug,
    importMap: {
      baseDir: path.resolve(dirname),
    },
    meta:{
      title:'Webzenith CMS |',
      description:'CMS built for Webzneith Blogs.',
    },
    components:{
      graphics:{
        Icon: {
          path: '@/components/payload/icon',
        },
        Logo: {
          path: '@/components/payload/logo',
        },
      }
    }
  },
  
  collections: [Media,Users,Blogs],
  editor:lexicalEditor({

    features({ defaultFeatures, }) {
      
      return [
        ...defaultFeatures,
        UploadFeature({}),
        HTMLConverterFeature({}),
      ]
    },
  }),
  secret: process.env.PAYLOAD_SECRET || '',
  typescript: {
    outputFile: path.resolve(dirname, 'payload-types.ts'),
  },
  db: mongooseAdapter({
    url: process.env.DATABASE_URI || '',
  }),
  sharp,
  plugins: [
    s3Storage({
      collections: {
        media: {
          prefix: 'media',
          disableLocalStorage: true,
        },
      },
      bucket: env.AWS_S3_BUCKET,
      config: {
        forcePathStyle: true,
        credentials: {
          accessKeyId: env.AWS_ACCESS_KEY_ID,
          secretAccessKey: env.AWS_SECRET_ACCESS_KEY,
        },
        region: env.AWS_REGION,
        endpoint: env.AWS_S3_ENDPOINT,
      },
      disableLocalStorage: true,
    }),
  ],
  upload:{
    limits:{
      fieldSize:5000000 //5 MB in bytes
    }
  }
})

file.mp4

With this configuration , nothing happens when i try to upload my media within the lexical editor , is there any additional setup that i need to perform for using lexical editor with payload v3.0 ?

Link to the code that reproduces this issue

npx create-payload-app@beta

Reproduction Steps

• Create a black payload v3 project
• Setup Payload s3 adapter for storage
• Use Lexical editor for richtext
• Create a collection using richtext

Which area(s) are affected? (Select all that apply)

plugin: richtext-lexical

Environment Info

Binaries:
  Node: 22.11.0
  npm: 10.9.0
  Yarn: 1.22.22
  pnpm: 9.12.3
Relevant Packages:
  payload: 3.0.0-beta.127
  next: 15.0.0
  @payloadcms/db-mongodb: 3.0.0-beta.127
  @payloadcms/email-nodemailer: 3.0.0-beta.127
  @payloadcms/graphql: 3.0.0-beta.127
  @payloadcms/next/utilities: 3.0.0-beta.127
  @payloadcms/payload-cloud: 3.0.0-beta.127
  @payloadcms/plugin-cloud-storage: 3.0.0-beta.127
  @payloadcms/richtext-lexical: 3.0.0-beta.127
  @payloadcms/storage-s3: 3.0.0-beta.127
  @payloadcms/translations: 3.0.0-beta.127
  @payloadcms/ui/shared: 3.0.0-beta.127
  react: 19.0.0-rc-65a56d0e-20241020
  react-dom: 19.0.0-rc-65a56d0e-20241020
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 ZEN SMP PREEMPT_DYNAMIC Fri, 01 Nov 2024 03:30:35 +0000
  Available memory (MB): 15702
  Available CPU cores: 12

[github-actions]

Please add a reproduction in order for us to be able to investigate.

Depending on the quality of reproduction steps, this issue may be closed if no reproduction is provided.

Why was this issue marked with the invalid-reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository created with create-payload-app@beta -t blank or a forked/branched version of this repository with tests added (more info in the reproduction-guide).

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Payload to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

Useful Resources

• Reproduction Guide
• Contributing to Payload

[robclancy]

I have this same issue. I think it was working during beta.

[nikolasp]

Reproduced the same issue with the latest version of payload.

EDIT:
The underlying issue is that no error is triggered by the absence of a registered media collection.
Ensure that you have registered the media collection, as proper functioning was observed once this was completed.
I assume the real problem here is lack of appropriate error message in case of missing media collection.
Keep in mind that this is confirmed using payload v3.4.0.

By default the UploadFeature is enabled, so this how the root instance of editor inside payload.config.ts is defined:

editor: lexicalEditor({}),

Collection fields section looks like this:

fields: [
    {
      name: 'content',
      label: 'Content',
      type: 'richText',
      required: true,
    },
  ],

According to the listed dependencies it seems that the latest version is affected too.

dependencies:
@fortawesome/fontawesome-svg-core 6.7.1    @types/uuid 10.0.0                         
@fortawesome/free-brands-svg-icons 6.7.1   cross-env 7.0.3                            
@fortawesome/free-regular-svg-icons 6.7.1  next 15.0.0                                
@fortawesome/free-solid-svg-icons 6.7.1    payload 3.4.0                              
@fortawesome/react-fontawesome 0.2.2       react 19.0.0-rc-65a56d0e-20241020          
@payloadcms/db-postgres 3.4.0              react-dom 19.0.0-rc-65a56d0e-20241020      
@payloadcms/next 3.4.0                     sharp 0.32.6                               
@payloadcms/payload-cloud 3.4.0            uuid 11.0.3                                
@payloadcms/richtext-lexical 3.4.0         

devDependencies:
@types/node 22.10.1
eslint 8.57.1
eslint-config-next 15.0.0
prettier 3.4.2
prettier-plugin-organize-imports 4.1.0
types-react 19.0.0-rc.1
types-react-dom 19.0.0-rc.1
typescript 5.7.2

[robclancy]

This wasn't working for us because the media had an option wrong about relationships. I'll be posting the exact thing here later and a new issue because there should at least be an error message.

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.

[github-actions]

🚀 This is included in version v3.13.0