1

I've got a file field that accepts .jpg, .png and .gif images:

<input type="file" accept=".jpg, .png, .gif">

I know that there's no difference between .jpg and .jpeg images but Mozilla appear to advocate specifying that the file field accepts both .jpg and .jpeg like so: 

<input type="file" accept=".jpg, .jpeg, .png, .gif">

Is this necessary?

Firefox accepts both .jpg and .jpeg when I only specify that the field accepts .jpg, but are there any browsers out there that need us to specify both?

Why do Mozilla docs show them specifying both if there's no difference?

stephenmurdoch
  • 34,024
  • 29
  • 114
  • 189
  • 1
    because you're not accepting file *types*, you're accepting file *extensions*. Different operating systems handle files differently - eg Windows just looks at the file extension and uses the defined application to open it regardless of what the actual file is. So you need both `jpg` and `jpeg` because traditionally windows could only handle 3 letter extensions. – freedomn-m Oct 06 '18 at 14:08
  • That's not the case anymore though – Aydin Oct 06 '18 at 14:08

1 Answers1

3

It's not necessary for the server to accept it, it is necessary for the client however, when browsing for files on the clients local machine... if you don't specify .jpeg extension then files with that extension would be excluded from what the user can select to upload

form {
  width: 600px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}
<form method="post" enctype="multipart/form-data">
 <div>
   <label for="file">With jpeg</label>
   <input type="file" id="file" name="file"  accept=".jpg, .jpeg, .png"  multiple>
 </div>
</form>


<form method="post" enctype="multipart/form-data">
 <div>
   <label for="file">Without jpeg</label>
   <input type="file" id="file" name="file" accept=".jpg, .png"  multiple>
 </div>
</form>
Aydin
  • 15,016
  • 4
  • 32
  • 42