Upload to S3 sometimes results in 504 | Payload | Page 1

misty tusk Mar 19, 2025, 9:01 AM

#

Locally, the upload works fine.

On the deployed version, I could upload a small image (45kb). Meaning, my env variables are set correctly.

But when I use one with 600kb for example, I get a 504 Gateway Timeout with following message:

Error

We encountered an error when trying to load your application and your page could not be served. Check the logs for your application in the App Platform dashboard.
upstream_reset_before_response_started{connection_termination} (503 UC)

App Platform failed to forward this request to the application.

On Bulk uploads I get

 Error

We encountered an error when trying to load your application and your page could not be served. Check the logs for your application in the App Platform dashboard.
no_healthy_upstream (503 UH)

App Platform failed to forward this request to the application.

The runtime logs don't show any error.

Server stats

CPU peaks at 15%
Memory peaks at 60%

Configuration

I use payload 3.28.1 (all packages have the same version)
Max upload size is set to 3MB on my S3 Bucket and in my collection.

Code snippets

// payload.config.ts
s3Storage({
      collections: {
        media: {
          disablePayloadAccessControl: true,
          generateFileURL: (doc) => {
            return `${env.S3_PUBLIC_BASE_URL}/${env.S3_BUCKET}/${doc.filename}`
          },
        },
      },
      bucket: env.S3_BUCKET,
      config: {
        forcePathStyle: true,
        credentials: {
          accessKeyId: env.S3_ACCESS_KEY_ID,
          secretAccessKey: env.S3_SECRET_ACCESS_KEY,
        },
        region: env.S3_REGION,
        endpoint: env.S3_ENDPOINT,
      },
    }),

I'm not sure how to debug this. Any idea?

final cedarBOT Mar 19, 2025, 9:01 AM

#

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

misty tusk Mar 19, 2025, 9:01 AM

#

And here my Media collection:

import type { CollectionConfig } from 'payload'

import {
  FixedToolbarFeature,
  InlineToolbarFeature,
  lexicalEditor,
} from '@payloadcms/richtext-lexical'

import { anyone } from '#access/anyone'
import { Media as MediaType } from '#payload-types.js'
import { env } from '#env'

export const Media: CollectionConfig = {
  slug: 'media',
  access: {
    read: anyone,
  },
  fields: [
    {
      name: 'alt',
      type: 'text',
      required: true,
    },
    {
      name: 'caption',
      type: 'richText',
      editor: lexicalEditor({
        features: ({ rootFeatures }) => {
          return [...rootFeatures, FixedToolbarFeature(), InlineToolbarFeature()]
        },
      }),
    },
  ],
  admin: {
    description: 'Bilder können maximal 3MB gross sein',
  },
  upload: {
    disableLocalStorage: true,
    adminThumbnail: ({ doc }: { doc: Partial<MediaType> }) => {
      const fileName = doc.sizes?.thumbnail?.filename || doc.filename
      return `${env.S3_PUBLIC_BASE_URL}/${env.S3_BUCKET}/${fileName}`
    },
    formatOptions: {
      format: 'webp',
    },
    mimeTypes: ['image/*'],
    imageSizes: [
      {
        name: 'thumbnail',
        width: 300,
      },
      {
        name: 'square',
        width: 500,
        height: 500,
      },
      {
        name: 'small',
        width: 600,
      },
      {
        name: 'medium',
        width: 900,
      },
      {
        name: 'large',
        width: 1400,
      },
      {
        name: 'xlarge',
        width: 1920,
      },
      {
        name: 'og',
        width: 1200,
        height: 630,
        crop: 'center',
      },
    ],
  },
}

misty tusk Mar 19, 2025, 12:15 PM

#

correction from my initial description.

I have an image name.jpg which is 682kb and always result in the error.

I have another image pirate.jpg which is 898kb and works just fine.

The difference between both pictures is the width and height.

name.jpg : 5063x3375px
pirate.jpg: 2551x1308px

This lead to me doing another test with a landscape image. I used exactly the same image and just resized it as follows:

3999x1477px, 1.4MB : Successful upload!
6000x3351px, 1MB: Successful upload!
8000x3351px, 1MB: Successful upload!
4000x3500px, 514kb: Successful upload!

6267x3500px, 1.05MB: Failed upload!

#Upload to S3 sometimes results in 504

Documentation: