5 ms·
Here's the relevant frontend source code for the file upload picker, if anyone's wondering (webpack://src/components/exam/submissions/FileInput.js): <input
by snazz 6y ago
Here's the relevant frontend source code for the file upload picker, if anyone's wondering (webpack://src/components/exam/submissions/FileInput.js):
<input
type="file"
ref={inputRef}
name="fileupload"
disabled={disabled}
accept={EXTENSIONS[type]}
data-cb-element="no-cb"
onChange={async e => {
const [file] = Object.keys(e.target.files).map(key => e.target.files[key])
const fileSizeInMb = file.size/(CONVERSION_BASE*CONVERSION_BASE)
const fileSizeInKb = file.size/CONVERSION_BASE
const split = file.name.split('.')
const fileType = split[split.length-1].toLowerCase()
const extensions = EXTENSIONS[type].split(', ')
const isAllowedExtension = extensions.includes(`.${fileType}`)
const alreadyExists = files.find(f => f.name === file.name && f.size === file.size && f.lastModified === file.lastModified)
let error
if (alreadyExists)
error = { title: 'You have already uploaded a file with the same name.', details: 'Please attach a different file.' }
else if (!isAllowedExtension)
error = { title: 'This file type is not acceptable.', details: 'Please check the requirements, save your file in one of the accepted formats, and resubmit.' }
else if (fileSizeInKb <= minSize)
error = { title: 'Your file is too small.', details: 'Please check the file-size requirements, save a larger version, and resubmit.' }
else if (fileSizeInMb > maxSize)
error = { title: 'Your file is too big.', details: 'Please check the file-size requirements, save a smaller version, and resubmit. ' }
if (error)
await setError(<><strong>{error.title}</strong> {error.details}</>)
else {
await updateFiles(file)
setError(null)
}
inputRef.current.value = null
}}
/>
The EXTENSIONS variable is defined here:
export const EXTENSIONS = {
[TYPE_DOC]: '.txt, .doc, .docx, .pdf, .odt',
[TYPE_PHOTO]: '.png, .jpg, .jpeg',
[TYPE_AUDIO]: '.m4a, .mp3, .wav, .ogg'
}
- machello13 6y agoSo do we know yet why iOS wasn't auto-converting the HEIC images? Is it because they didn't use mime types in the `accept` attribute?
- snazz 6y agoThat's my guess, looking at how they made the accept attribute.
- scott_s 6y agoI wondered that, too, but when I googled around for how to do that properly, I didn't see anything saying it matters.
- 43920 6y agoA lot of the people with issues appear to have airdropped the photo to their computer (which doesn't trigger the auto-conversion path), and then uploaded it from there (possibly using a non-Safari browser, which wouldn't do any conversion).
- scott_s 6y agoI'm trying to square this with the fact people pointed out downthread, which is that iPhones will automatically convert HEIC images to jpeg from an HTML input form. Perhaps it's the `isAllowedExtension` check? If `e.target.files` is the actual file names on disk (and not whatever temporary file the browser made out of the HEIC file), that would cause a problem.
- acqq 6y agoApparently somebody claims to have been able to change the extension and submit the picture, but got "file corrupted" later: "Senior Dave Spencer took a demo test before his Calculus AB exam to make sure he understood the process for uploading photos. He Airdropped an iPhone image of his responses to his Mac and tried to convert it by renaming the HEIC file to PNG. Changing a file’s extension does not guarantee that it will be converted, but Spencer was still able to submit the demo test with no problem. Spencer used the same process on the real exam and thought it went through, but he received an email the next day saying the files were corrupted and that he needed to retake the test."
- scott_s 6y agoThat anecdote is inline with my explanation: the student manually changed the file extension on disk, then uploaded that. That would pass all of the checks, but it would still be in the wrong format, as manually changing the file extension does not cause a conversion to take place on disk, and that probably prevents the automatic conversion of HEIC to jpeg the iPhone itself does on such input fields.
- tiglionabbit 6y agoHuh. So, according to the other comments, if they'd set the `accepts` on their form to MIME types instead of extensions, the browser would have converted the file to a JPG automatically.
- KingMachiavelli 6y agoWhich means I think the blame is more on Apple side since the 'accept' attribute is intended to work with any 'Unique file type specifiers' [1] which includes both MIME types and extensions. Perhaps Apple is following a different RFC? [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in...
- savrajsingh 6y agoHaha, the fact that we are code reviewing this on HN is amazing. OK, the issue is "accept" isn't formatted as "image/jpeg, image/png", it's a list of file extensions. Which apparently wasn't enough to trigger iPhone's auto-conversion, and they just decided there wasn't a tech fix. You can totally see why -- they just never tried the mime-types.