I'm checking the file size of the files added via the <input /> html element in my Nextjs project.

It's working pretty fine on desktop. But now I've tested it on mobile (iOS) and the internal file picker of the iOS is previewing a different file size than the file[0].size object in JavaScript.

Background is, that I'm not uploading files bigger than 5MB to the server (Vercel has a strict 5MB payload limit) - so I'm testing for file[0].size < maxFileSize.

If I'm selecting a 6,7MB picture on my phone, the file[0].size is 4856162 (and not 6,7x1024x1024 = 7025459) and therefore below my 5242880 limit. But the server is now throwing errors, because the payload is above 5MB.

Are there any possibilities to get the "true" file size of iOS images in JS?

EDIT:

Screenshot of the iOS file browser, which shows that this image has for example 7,1MB

Screenshot of the safari log on iOS, which shows the logged file.size and the maxFileSize:

@brc-dd: Thanks for your suggestion, for now I'll just catch the 413 response from the server - but this is nonetheless a strange behaviour