I have a simple file upload collection
export const KioskImages: CollectionConfig = {
slug: 'kiosk-images',
access: {
read: () => true,
create: canCreateImage(),
},
fields: [],
upload: true,
}
I am able to Upload to it using the rest API locally with no issues with simple code to upload, where file is coming from a file input:
const addImage = async (file: File): Promise<PayloadKioskImage | null> => {
try {
if (file.size === 0) {
throw new Error('Attempted to upload empty file')
}
const formData = new FormData()
formData.append('file', file)
const options: RequestInit = {
method: 'POST',
body: formData
}
const { data, error } = await fetch(`api/kiosk-images`, options).json()
if (error.value) throw error.value
if (data.value.doc) return data.value.doc
} catch (e) {
console.log(e)
toast({
title: `Error adding image`
})
}
return null
}
When I try on my production instance on Payload Cloud I get intermittent 400 Bad Request Errors. On the same image. Sometimes it works, sometimes it doesnt and there is no idication as to why.
400 Bad Request
{"errors":[{"message":"There was a problem while uploading the file."}]}
The cloud logs show the following.
2025-03-20T21:30:19]
[21:30:19] ERROR: Empty file
[2025-03-20T21:30:19]
err: {
[2025-03-20T21:30:19]
"type": "Error",
[2025-03-20T21:30:19]
"message": "Empty file",
[2025-03-20T21:30:19]
"stack":
[2025-03-20T21:30:19]
Error: Empty file
[2025-03-20T21:30:19]
at u (/workspace/packages/apps/cms/.next/server/chunks/3077.js:27:35748)
[2025-03-20T21:30:19]
}
[2025-03-20T21:30:19]
[21:30:19] ERROR: There was a problem while uploading the file.
But the file is definetly not empty and it works randomly sometimes. And always works locally.