Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Error: Filename is Invalid

default discord avatar
taun21602 years ago
8

Hi. I'm receiving an error when I try to save the CMS fields of a portfolio item within the Payload admin panel (Below in this thread is a screenshot). The Portfolio collection is the only change I've made to this next-customer-server repo, so I don't know what to debug. I'm a beginner so the answer is most likely obvious.



[10:01:07] ERROR (payload): ValidationError: The following field is invalid: filename
    at new ExtendableError (C:\git\White_Polaroids\WhitePolaroids6\node_modules\payload\src\errors\APIError.ts:26:11)
    at new APIError (C:\git\White_Polaroids\WhitePolaroids6\node_modules\payload\src\errors\APIError.ts:43:5)
    at new ValidationError (C:\git\White_Polaroids\WhitePolaroids6\node_modules\payload\src\errors\ValidationError.ts:8:5)    
    at create (C:\git\White_Polaroids\WhitePolaroids6\node_modules\payload\src\collections\operations\create.ts:214:11)       
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async createHandler (C:\git\White_Polaroids\WhitePolaroids6\node_modules\payload\src\collections\requestHandlers\create.ts:19:17)


"The following field is invalid - filename"



import { CollectionConfig } from 'payload/types';
import slug from '../fields/slug';
import { Type as MediaType } from './Media';

export type Type = {
  title: string
  featuredMedia: MediaType
  previewMedia: {
    media: MediaType
  }[]
  location?: string
  slug: string
  meta: MetaType
}
const Portfolio: CollectionConfig = {
slug: 'portfolio',
admin: {
    useAsTitle: 'title',
},

fields: [
    {
      name: 'title',
      type: 'text',
      required: true,
    },
    {
        name: 'featuredMedia',
        label: 'Featured Media',
        type: 'upload',
        relationTo: 'media',
        required: true,
      },
      {
        name: 'location',
        label: 'Location',
        type: 'text',
        required: false,
        admin: {
          position: 'sidebar',
        }
    },
    {
    name: 'images',
    type: 'upload',
    relationTo: 'media',
    filterOptions: {
        mimeType: { contains: 'image' },
    hasMany: true,
    required: true,
  },
},
],
};

export default Portfolio;


 import { buildConfig } from 'payload/config';
import dotenv from 'dotenv';
import Page from './collections/Page';
import Media from './collections/Media';
import Portfolio from './collections/Portfolio';

dotenv.config();

export default buildConfig({
  serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,
  collections: [
    Page,
    Media,
    Portfolio,
  ],
});


Here's a video screenshare:



I've run yarn again - packages are up to date



The EPERM error is a standard occurance when the server is already running. I don't think that is related to this issue.



I've edited the Type to include the location field

export type Type = {
  title: string
  slug: string
  text: string
  location?: string
}


I assume I must run yarn dev again or the changes don't reflect? After I run yarn dev I get this message:


 PS C:\git\White_Polaroids\WhitePolaroids6> yarn dev
yarn run v1.22.19
$ ts-node server.ts
[11:09:57] INFO (payload): Connected to Mongo server successfully!
[11:09:57] INFO (payload): Starting Payload...
info  - Loaded env from C:\git\White_Polaroids\WhitePolaroids6\.env
webpack built 0cea50bd02cd37f88e22 in 14623ms
webpack compiled successfully
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: No serializer registered for ConcatSource
<w> while serializing webpack/lib/util/registerExternalSerializer.webpack-sources/ConcatSource -> Array { 2 items } -> ConcatSource


It doesn't provide the success message I received the first time I started the server. The error persists, though I wonder if that's because the server isn't refreshing or if the Type change has had no effect?



Repo:

https://github.com/taunhealy/WhitePolaroids6

  • default discord avatar
    notchr2 years ago

    OK SO



    good morning 🙂



    So the filename is invalid error



    What was the file you uploaded



    Let's start with tackling

    [10:01:07] ERROR (payload): ValidationError: The following field is invalid: filename at new ExtendableError
  • default discord avatar
    taun21602 years ago

    Any of these photos. The length of the charaters in the filename shouldn't matter?



    @1049775120559898725

    Here's a screenshot



    I don't think it has anything to do with the string of the filename, as the error persists when I upload a different image with a shorter filename.

  • default discord avatar
    notchr2 years ago

    Right right, hmmm



    Haven't forget, will continue to review once I finish fixing a bug at work 🙂

  • default discord avatar
    taun21602 years ago

    Cool, thanks Chris

  • default discord avatar
    jessrynkar2 years ago

    The

    images

    field in your

    portfolio

    collection might be the culprit here. The

    upload

    field type doesn't have a

    hasMany

    option and

    required: true

    should be at the top-level instead of in

    filterOptions

    . Should look like this instead:


        {
          name: 'images',
          type: 'upload',
          relationTo: 'media',
          filterOptions: {
            mimeType: { contains: 'image' },
          },
          required: true,
        },
  • default discord avatar
    taun21602 years ago

    Thanks!



    Ah, the error is still there - "The following field is invalid: filename"



    My updated Portfolio collection:



     import { CollectionConfig } from 'payload/types';
    import slug from '../fields/slug';
    import { Type as MediaType } from './Media';
    
    export type Type = {
      title: string
      featuredMedia: MediaType
      previewMedia: {
        media: MediaType
      }[]
      location?: string
      slug: string
    }
    const Portfolio: CollectionConfig = {
      slug: 'portfolio',
      admin: {
        useAsTitle: 'title',
      },
    
      fields: [
        slug,
        {
          name: 'title',
          type: 'text',
          required: true,
        },
        {
          name: 'featuredMedia',
          label: 'Featured Media',
          type: 'upload',
          relationTo: 'media',
          required: true,
        },
        {
          name: 'location',
          label: 'Location',
          type: 'text',
          required: false,
          admin: {
            position: 'sidebar',
          },
        },
        {
          name: 'previewMedia',
          label: 'Preview Media',
          type: 'group',
          fields: [
            {
              name: 'media',
              label: 'Media',
              type: 'upload',
              relationTo: 'media',
              required: true,
            },
          ],
        },
      ],
    };
    
    export default Portfolio;
  • default discord avatar
    jessrynkarlast year
    @479030528084017165

    are you still getting an error here?

  • default discord avatar
    taun2160last year
    @854377910689202256

    - all good, thanks!

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.