Local development file upload

[ghost]

Hi!

Is it possible somehow to upload the files locally and make them available for local development?

Thank you, David

[tylandavis]

Hey @david-comet, are you referring files uploaded in a collection?

You can set the staticDir and staticURL properties on your upload-enabled collection config to point to local files.

However, if you are hosting your project on a serverless platform like Vercel, your files will not be stored permanently. Serverless platforms use ephemeral storage, meaning your codebase is frequently restarted, and reverts back to the state it was in when you deployed.

This is why it is recommended to use a file storage solution like S3, so you can access your files no matter what environment you are running.

[ghost]

Yes, I understood the serverless concept. What should the variables be set to so that the files are available on the frontend? I created a new nextjs project from scratch, and added the next-payload as the documentation said. This is what my media collection looks like now:

export const Media: CollectionConfig = {
  slug: 'media',
  upload: {
    staticDir: '../../media',
    staticURL: '/media',
  }
  ...
};

[tylandavis]

You'll need to use the public folder in NextJS to store and serve your static assets. Your staticDir route will depend on where your payload.config, and the staticURL should be relative to the public folder.

For example, if my config is located at my-next-app/payload/payload.config.ts, set your values as follows:

export const Media: CollectionConfig = {
  slug: 'media',
  upload: {
    staticDir: '../public/media',
    staticURL: '/media',
  }
  ...
};

[xyxc0673]

Hey @tylandavis I configured the next-payload-demo project with your indication but still somehow not woking. the uploaded image files were found in .next/server/pages/media but not identified by server.

Is that I missed some configuration on next app?

[tylandavis]

@xyxc0673 It is working for me fine in the next-payload-demo with my media config as follows:

import { CollectionConfig } from 'payload/types';

export const Media: CollectionConfig = {
  slug: 'media',
  upload: {
    staticDir: '../public/media',
    staticURL: '/media',
  },
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'alt',
      type: 'text',
      required: true,
    },
  ]
}

Make sure you remove the Cloud Storage plugin from your payload.config.ts, it will override these settings.

[xyxc0673]

Thanks @tylandavis, It is woking with the config after I stash all changes