My media files are not found after docker compose down then up

[sayinmehmet47]

I have vps that i spin my payload app and nextjs frontend app. My media are persistent when i upload delete any media files. But when in my hetzner machine i stop the docker containers and run them my images are lost

i was thinking if the problem is volumes. I already added the volumes correctly i think like here. As you see i added volume in to persist images.

volumes:
- payload-data:/home/node/app/dist/media

version: '3.8'

services:
  blueastowel:
    image: sayinmehmet47/client-blueastowel
    ports:
      - '3000:3000'
    environment:
      - PAYLOAD_APP_URL=http://payload:3000
      - PAYLOAD_API_KEY=xxx
      - PAYLOAD_API_SLUG=users
      - URL=http://blueastowel:3000
      - NODE_ENV=production
    networks:
      - app-network
    depends_on:
      - payload

  payload:
    image: sayinmehmet47/payload-cms-app:latest
    ports:
      - '3001:3000'
    depends_on:
      - mongo
    volumes:
      - payload-data:/home/node/app/dist/media
    environment:
      - DATABASE_URI=mongodb://mongo/payload-template-blank
      - PAYLOAD_SECRET=YOUR_SECRET_HERE
      - SMTP_USER=blueastowel92@gmail.com
      - SMTP_PASS=rqmr tacp imuq xgvj

  mongo:
    image: mongo:latest
    ports:
      - '27017:27017'
    volumes:
      - data:/data/db
    command: ["--storageEngine=wiredTiger"]
    logging:
      driver: none

volumes:
  data:
  node_modules:
  payload-data:

networks:
  app-network:
    driver: bridge

Then i though maybe the problem is in my Media.ts setup. But did not see anything suspicious

import { CollectionConfig } from 'payload/types';

export const Media: CollectionConfig = {
  slug: 'media',
  upload: {
    staticURL: '/media',
    staticDir: 'media',
    adminThumbnail: 'thumbnail',
    mimeTypes: ['image/*'],
    imageSizes: [
      {
        name: 'thumbnail',
        width: 400,
        height: 300,
      },
      {
        name: 'preview',
        width: 800,
        height: 800,
        formatOptions: {
          format: 'webp',
        },
        withoutEnlargement: true,
      },
      {
        name: 'landscape',
        width: 2880,
        height: 2160,
        formatOptions: {
          format: 'webp',
        },
        withoutEnlargement: true,
      },
      {
        name: 'portrait',
        width: 2160,
        height: 2880,
        formatOptions: {
          format: 'webp',
        },
        withoutEnlargement: true,
      },
      {
        name: 'square',
        width: 2160,
        height: 2160,
        formatOptions: {
          format: 'webp',
        },
        withoutEnlargement: true,
      },
    ],
  },
  fields: [
    {
      name: 'alt',
      type: 'text',
    },
  ],

  timestamps: true,
  access: {
    create: () => true,
    read: () => true,
    update: () => true,
    delete: () => true,
  },
};

i have already link for my repo
https://github.com/sayinmehmet47/blueastowel-cms

[akbarsayakov]

any updates?

[JadeWhite]

My issue turned out to be different, but it's semi-related:

Using Payload versions:

"@payloadcms/db-mongodb": "^3.25.0",
"@payloadcms/next": "^3.25.0",

I experienced a similar bug after restarting my mongodb and payload containers from yesterday. My images are stored in /media in a docker container and don't show up initially. However - after I log into the admin panel , the errors go away and the images show up.

I found restarting the containers fast doesn't cause the issue, but if I wait about 2 minutes between shutting them down and starting them up, I can get it to come back.

An error comes from the payload project (when it tries to display an image from /media):

portfolio4-nextjs  | [20:42:58] ERROR: Cannot read properties of undefined (reading 'type')
portfolio4-nextjs  |     err: {
portfolio4-nextjs  |       "type": "TypeError",
portfolio4-nextjs  |       "message": "Cannot read properties of undefined (reading 'type')",
portfolio4-nextjs  |       "stack":
portfolio4-nextjs  |           TypeError: Cannot read properties of undefined (reading 'type')
portfolio4-nextjs  |               at ta (/app/.next/server/chunks/3232.js:39:7896)
portfolio4-nextjs  |               at to (/app/.next/server/chunks/3232.js:39:12224)
portfolio4-nextjs  |               at tl (/app/.next/server/chunks/3232.js:39:14248)
portfolio4-nextjs  |               at e9 (/app/.next/server/chunks/3232.js:39:6680)
...

Digging the compiled code it was coming from
/app/.next/server/chunks/3232.js:39:7896

ta = ({field: t, hasCustomID: i, locale: r, operator: n, parentIsLocalized: a, path: s, payload: o, val: l}) => {
        let c = l, u = n;
        if (["array", "blocks", "group", "tab"].includes(t.type) && s.includes(".")) {
           // -------------------------------------------^ t is undefined
           //t: undefined, i: false, n: "equals", s: "_status", l: "published"

          let i = s.split(".");
          i.shift();
          let r = tn({field: t, payload: o, segments: i});
          r && (t = r)
        }
        if ("_id" === s) {
          if ("string" == typeof l && 1 === l.split(",").length) {
            if (!i) {
...

Which reminded me of this code from the website template repo:
src/payload/access/authenticatedOrPublished.ts

export const authenticatedOrPublished: Access = ({ req: { user } }) => {
  if (user) {
    return true
  }

  return {
    _status: {
      equals: 'published',
    },
  }
}

Which I had set to all of my collections like

access: {
    ...
    read: authenticatedOrPublished,
   ...
  },

Even though only some of my collections were using drafts, therefore the published column would be missing.
After I replaced read with read: () => true on the collections without drafts, it worked as expected.

Unfortunately in your case you already have read: () => true everywhere. But it's odd my issue only happened when I restarted the docker containers. I could assume this was caused by the payload-user session cookie, but that expires in 3 hours, not 2 minutes.