linking media in astro

Question

I have a website built with Astro and use Netlify CMS for content management. The media upload location seems to be different from where I want to link. I had a look at the documentation and the config seems to be correct but the path is being created inside the pages folder which I think might be the issue: https://docs-starters--netlify-cms-www.netlify.app/docs/configuration-options/.

If I use the upload widget for the pdf file then it uploads in my pages/forms/static/upload which is correct but if I want to link it then it might be a problem. Does anyone have an idea how to get this linked up with Astro inside the pages folder? If I use the config as below then it uploads to src/pages/forms/static/upload.

Here is a snippet of my Astro config:

NetlifyCMS({
  config: {
    backend: {
      name: 'git-gateway',
      branch: 'latest',
    },
    collections: [
      {
        name: 'forms',
        label: 'Forms',
        label_singular: 'Forms',
        folder: 'src/pages/forms',
        create: true,
        delete: true,
        fields: [
          { name: 'title', widget: 'string', label: 'Post Title' },
          {
            name: 'publishDate',
            widget: 'datetime',
            format: 'DD MMM YYYY',
            date_format: 'DD MMM YYYY',
            time_format: false,
            label: 'Publish Date',
          },
          { name: 'author', widget: 'string', label: 'Author Name', required: false },
          { name: 'authorURL', widget: 'string', label: 'Author URL', required: false },
          { name: 'description', widget: 'string', label: 'Description', required: false },
          {
            name: 'pdfFile',
            widget: 'file',
            label: 'PDF File',
            required: false,
            media_folder: 'static/upload',
            public_folder: '/upload',
            accept: ['application/pdf'],
          },
          { name: 'body', widget: 'markdown', label: 'Post Body' },
          {
            name: 'layout',
            widget: 'select',
            default: '../../layouts/BlogPost.astro',
            options: [
              { label: 'Forms', value: '../../layouts/BlogPost.astro' },
            ],
          },
        ],
      },          
    ],
  },
  previewStyles: ['/src/styles/blog.css'],
}),

Here is the component I am using to render the data:

<article class="post-preview mt-5 mb-5 flex md:justify-start justify-center">
  <FileIcon /><a href={post.url}
    ><a href={post.frontmatter.pdfFile}
      ><p class="text-xl">
        {post.frontmatter.title}
      </p></a
    >
  </a>
</article>

Answer 1

I managed to solve it. The config was supposed to be in root and not in the individual collection. Here is an example:

NetlifyCMS({
  config: {
    backend: {
      name: 'git-gateway',
      branch: 'latest',
    },
    media_folder: 'public/upload',
    public_folder: '/upload',
    collections: [
      {
        name: 'forms',
        label: 'Forms',
        label_singular: 'Forms',
        folder: 'src/pages/forms',
        create: true,
        delete: true,
        fields: [
          { name: 'title', widget: 'string', label: 'Post Title' },
          {
            name: 'publishDate',
            widget: 'datetime',
            format: 'DD MMM YYYY',
            date_format: 'DD MMM YYYY',
            time_format: false,
            label: 'Publish Date',
          },
          { name: 'author', widget: 'string', label: 'Author Name', required: false },
          { name: 'authorURL', widget: 'string', label: 'Author URL', required: false },
          { name: 'description', widget: 'string', label: 'Description', required: false },
          {
            name: 'pdfFile',
            widget: 'file',
            label: 'PDF File',
            accept: ['application/pdf'],
          },
          { name: 'body', widget: 'markdown', label: 'Post Body' },
          {
            name: 'layout',
            widget: 'select',
            default: '../../layouts/BlogPost.astro',
            options: [
              { label: 'Forms', value: '../../layouts/BlogPost.astro' },
            ],
          },
        ],
      },          
    ],
  },
  previewStyles: ['/src/styles/blog.css'],
}),