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.

PayloadCMS Upload field: how does it work?

default discord avatar
walteraandradelast year
3

Reading the docs I can read:



"By simply enabling Upload functionality on a Collection, Payload will automatically transform your Collection into a robust file management / storage solution."



Now, I understand this, but it would be nice if someone could either explain it in more details or point to some part of the code that I could use to understand how Payload manages media files.



REF:

https://payloadcms.com/docs/upload/overview
  • default discord avatar
    zed0547last year

    Hey

    @187583730804719617

    ,



    This is a typical upload-enabled collection config with a slug of

    'media'

    , commonly referred to as a Media collection by some users:



    import type { CollectionConfig } from 'payload'
    
    export const mediaSlug = 'media'
    
    export const MediaCollection: CollectionConfig = {
      slug: mediaSlug,
      access: {
        create: () => true,
        read: () => true,
      },
      fields: [
        {
          type: 'text',
          name: 'alt',
          required: true
        }
      ],
      upload: {
        crop: true,
        focalPoint: true,
        imageSizes: [
          {
            name: 'thumbnail',
            height: 200,
            width: 200,
          },
          {
            name: 'medium',
            height: 800,
            width: 800,
          },
          {
            name: 'large',
            height: 1200,
            width: 1200,
          },
        ],
      },
    }


    This collection houses additional properties unique to upload-enabled collections. It has image sizes which transforms images, as well as other fields that are not listed here but are present, such as the medias url, size, width/height, etc.



    In addition to this, in your

    payload.config.ts

    file, you can declare more customization options by passing an

    upload

    property to your buildConfig, for example:



    // payload.config.ts
    buildConfig({
      ...
      upload: {
        abortOnLimit: true,
        limits: {
          fileSize: 2_000_000, // 2MB
        },
      }
      ...
    })
  • default discord avatar
    walteraandradelast year

    Thanks

    @654031862146007055

    , I'm sorry, I was actually curious about how Payload stores this media. Both the Paylaod app and the DB will be deployed in Cloud Run with Docker images, so I'm trying to understand if I can simply deploy it as it is or if it would be better to add an adapter.

  • default discord avatar
    zed0547last year

    Adapter is your best bet



    Cloud Run is still serverless



    I think Cloud Run is really cool, using some nice technologies powering it, but if I remember correctly they're still just disposable containers



    Which means that your images

    may

    work for a little bit but will eventually be wiped

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.