A JPEG upload field should tell the browser what to offer and tell the user what the endpoint accepts. Those hints do not establish that the selected file is a valid upload.
The accept attribute supports comma-separated filename extensions and MIME types. MDN recommends accounting for the different ways a required type can be identified. For a JPEG-only field, you can include .jpg, .jpeg and image/jpeg:
<label for="photo">Choose a JPEG photograph</label>
<input
id="photo"
type="file"
accept=".jpg,.jpeg,image/jpeg"
>
The browser uses that list to guide file selection. It does not convert a photograph or prove that the encoded image is JPEG. As MDN explains, accept is not type validation, and users can often override the picker filter.
Explain the endpoint's JPEG requirement beside the field, before selection. If conversion is needed, ask for a converted copy while retaining the original. Changing a filename extension does not change its encoding.
Check the server's upload requirements independently. Give a rejected file type a distinct message from a file-size rejection or another upload error. That tells the user what to fix without treating the picker filter as a guarantee.
Reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
I work on Morphio (https://morphio.online/). This is a general image-file workflow example, not a claim about a product's implementation.
Top comments (0)