Different behavior on development machine and server for image upload

[jokillinger]

I have a collection for uploading images. It uses the imageSizes: array to resize the images to large and medium resolution. If the uploaded image is smaller than the large size, large is simply omitted. This works perfectly on my development machine (macOS Monterey).
When running on the server (Ubuntu 20.04 LTS), it works fine when the uploaded image is larger or at least the size of the "large" imageSize. But I get this error when the image is smaller:
The following field is invalid: sizes.large.filename

Installed versions of dependencies and all is exactly the same on both machines.
Any idea, what the problem is?

[denolfe]

Hey @Salomo, are you uploading from the UI or API? Could you also provide your imageSizes configuration, so we can be sure we're running the same thing?

I was unable to recreate this from my macOS machine. However, I can look into running this on an Ubuntu machine if that appears to be the determining factor.

[jokillinger]

Hi @denolfe,
thank you for helping.

This is the code of the collection:

import {imgPaths} from '../lib/constants'
import {accessContentManager} from '../access/checkRole'


const CSImages = {
	slug: 'csimages',
	labels: {
		singular: 'CS Image',
		plural: 'CS Images',
	},
	access: {
		create: accessContentManager,
		read: () => true,
		update: accessContentManager,
		delete: accessContentManager,
	},
	fields: [
		{
			name: 'name',
			type: 'text'
		},
		{
			name: 'alttext',
			label: 'Alt Text',
			type: 'text',
			maxLength: 200,
		}
	],
	upload: {
		staticURL: `/assets/${imgPaths.csImages}`,
		staticDir: `assets/${imgPaths.csImages}`,
		imageSizes: [
			{
				name: 'large',
				width: 1650,
			},
			{
				name: 'small',
				width: 800,
			},
		],
	},
	timestamps: true,
	admin: {
		useAsTitle: 'filename',
		description: 'Formats: .jpg, .jpeg, .png<br/>Size: about 1650 pixels wide',
		disableDuplicate: true,
	},
}

export default CSImages

The strangest thing is, that it works for 2 or 3 images. Then the error occurs. And even if I remove the imageSizes array from the collections then, I still get the same error. When I delete all previously entered images, it works again. The upload is via UI.

This is the error:

ERROR (payload): ValidationError: The following field is invalid: sizes.large.filename
at new ExtendableError (/path/to/app/node_modules/payload/dist/errors/APIError.js:22:15)
at new APIError (/path/to/app/node_modules/payload/dist/errors/APIError.js:38:9)
at new ValidationError (/path/to/app/node_modules/payload/dist/errors/ValidationError.js:10:9)
at Payload.create (/path/to/app/node_modules/payload/dist/collections/operations/create.js:175:19)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Payload.create (/path/to/app/node_modules/payload/dist/collections/requestHandlers/create.js:10:21)

Thanks again for your help.

[DanRibbens]

@Salomo Can you try this again after upgrading to 0.16.4?

There was a bug when uploading an image with the same dimensions as one of the imageSizes when validating the memeTypes. I need to know if this was the same error as you experienced.

Thanks!