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
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
Any of these photos. The length of the charaters in the filename shouldn't matter?
@notchr 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.
Right right, hmmm
Haven't forget, will continue to review once I finish fixing a bug at work 🙂
Cool, thanks Chris
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,
},
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;
@taun2160 are you still getting an error here?
@jesschow - all good, thanks!
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.