Upload Page Using REST API

Oct 13, 2025 by magicalceylontours.com 144 views

Problem Description

When attempting to upload a file using the Payload CMS REST API, an error occurs, and the file is not successfully uploaded. The error message displayed on the browser is "Something went wrong," while the server console displays "Cannot read properties of undefined (reading 'title')".

Collection Configuration

The collection configuration is set up as follows:

import type { CollectionConfig } from 'payload'
export const DemoCollection: CollectionConfig = {
  slug: 'demoCollection',
  fields: [
    {
      type: 'text',
      name: 'title',
      label: 'Title',
    },
    { type: 'upload', name: 'image', label: 'Image', relationTo: 'media' },
  ],
}

Upload Page Using REST API

The upload page is implemented using the following code:

'use client'
const FormSchema = z.object({
  title: z.string().min(2, {
    message: 'Title must be at least 2 characters.',
  }),
  image: z.instanceof(FileList),
})
const DemoPage = () => {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      title: '',
    },
  })
  async function onSubmit(data: z.infer<typeof FormSchema>) {
    const formData = new FormData()
      formData.append('image', data.image[0])
    formData.append('title', data.title)
    console.log('formData', formData)
    try {
      const req = await fetch('{apiurl}/demoCollection', {
        method: 'POST',
        credentials: 'include',
        body: formData,
      })
      const data = await req.json()
      console.log('res data', data)
    } catch (err) {
      console.log(err)
    }
  }
  return (
    <div className="container">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
          <FormField
            control={form.control}
            name="title"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Title</FormLabel>
                <FormControl>
                  <Input placeholder="Enter title" {...field} />
                </FormControl>
                <FormDescription>This is the title of your demo item.</FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="image"
            render={({ field }) => (
              <FormItem>
                <FormControl>
                  <Input
                    type="file"
                    onChange={(e) => {
                      field.onChange(e.target.files)
                    }}
                  />
                </FormControl>
                <FormDescription>Upload your image file.</FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit">Submit</Button>
        </form>
      </Form>
    </div>
  )
}
export default DemoPage

Error Messages

The error messages displayed on the browser and server console are:

Browser: "Something went wrong."
Server console: "Cannot read properties of undefined (reading 'title')".

Reproduction Steps

To reproduce this issue, follow these steps:

Set up a Payload CMS project with the collection configuration as shown above.
Implement the upload page using the code provided.
Attempt to upload a file using the upload page.

Environment Information

The environment information is as follows:

Node: 22.14.0
Relevant Packages:
- payload: 3.28.1
- next: 15.2.0
- @payloadcms/db-mongodb: 3.25.0
- @payloadcms/email-nodemailer: 3.27.0
- @payloadcms/email-resend: 3.25.0
- @payloadcms/graphql: 3.27.0
- @payloadcms/live-preview: 3.27.0
- @payloadcms/live-preview-react: 3.25.0
- @payloadcms/next/utilities: 3.25.0
- @payloadcms/payload-cloud: 3.25.0
- @payloadcms/plugin-form-builder: 3.25.0
- @payloadcms/plugin-nested-docs: 3.25.0
- @payloadcms/plugin-redirects: 3.25.0
- @payloadcms/plugin-search: 3.25.0
- @payloadcms/plugin-seo: 3.25.0
- @payloadcms/richtext-lexical: 3.25.0
- @payloadcms/translations: 3.27.0
- @payloadcms/ui/shared: 3.25.0
- react: 19.0.0
- react-dom: 19.0.0

Possible Solutions

Based on the error messages and environment information, possible solutions to this issue are:

Verify the collection configuration: Ensure that the collection configuration is set up correctly and that the image field is properly configured.
Check the upload page implementation: Review the upload page implementation to ensure that it is correctly handling the file upload and sending the correct request to the Payload CMS API.
Verify the API endpoint: Ensure that the API endpoint is correctly configured and that the request is being sent to the correct URL.
Check the server console logs: Review the server console logs to identify any errors or issues that may be causing the problem.

Q: What is the issue with uploading files using the Payload CMS REST API?

A: The issue is that the file is not being successfully uploaded, and the error message "Something went wrong" is displayed on the browser. The server console displays "Cannot read properties of undefined (reading 'title')".

Q: What are the possible causes of this issue?

A: The possible causes of this issue are:

Incorrect collection configuration: The collection configuration may not be set up correctly, or the image field may not be properly configured.
Incorrect upload page implementation: The upload page implementation may not be correctly handling the file upload and sending the correct request to the Payload CMS API.
Incorrect API endpoint: The API endpoint may not be correctly configured, or the request may not be being sent to the correct URL.
Server-side errors: There may be server-side errors or issues that are preventing the file from being uploaded successfully.

Q: How can I verify the collection configuration?

A: To verify the collection configuration, follow these steps:

Check the collection configuration file to ensure that it is correctly set up.
Verify that the image field is properly configured and that it is set to the correct type (e.g. upload).
Check that the collection configuration is correctly linked to the Payload CMS API.

Q: How can I check the upload page implementation?

A: To check the upload page implementation, follow these steps:

Review the upload page code to ensure that it is correctly handling the file upload and sending the correct request to the Payload CMS API.
Verify that the upload page is correctly handling any errors that may occur during the file upload process.
Check that the upload page is correctly displaying any error messages that may occur during the file upload process.

Q: How can I verify the API endpoint?

A: To verify the API endpoint, follow these steps:

Check the API endpoint URL to ensure that it is correctly configured.
Verify that the API endpoint is correctly handling the file upload request.
Check that the API endpoint is correctly returning any error messages that may occur during the file upload process.

Q: How can I check the server console logs?

A: To check the server console logs, follow these steps:

Review the server console logs to identify any errors or issues that may be causing the problem.
Verify that the server console logs are correctly displaying any error messages that may occur during the file upload process.
Check that the server console logs are correctly indicating any issues that may be preventing the file from being uploaded successfully.

Q: What are some common issues that can cause this problem?

A: Some common issues that can cause this problem include:

Incorrect file type: The file type may not be correctly configured, or the file may not be in the correct format.
Incorrect file size: The file size may be too large, or the file may not be in the correct format.
Server-side errors: There may be server-side errors or issues that are preventing the file from being uploaded successfully.
Network issues: There may be network issues or connectivity problems that are preventing the file from being uploaded successfully.

Q: How can I troubleshoot this issue?

A: To troubleshoot this issue, follow these steps:

Review the collection configuration and upload page implementation to ensure that they are correctly set up.
Verify that the API endpoint is correctly configured and that the request is being sent to the correct URL.
Check the server console logs to identify any errors or issues that may be causing the problem.
Test the file upload process to ensure that it is working correctly.

By following these steps and troubleshooting the issue, you should be able to identify and resolve the problem with uploading files using the Payload CMS REST API.