How to allow `` to accept only image files?

Back to basics: Implementing the <input> element

Client-side filtering: A first line of defense

The HTML accept attribute acts as a lane assistant, guiding users to upload files in the desired format. But remember - this is just client-side filtering.

<!-- Yes sir, only .png, .jpg or .jpeg images shall pass! -->
<input type="file" accept=".png, .jpg, .jpeg"> 


When only pictures are invited to the party: The image/* wildcard

The image/* wildcard accepts any image type, permitting all image formats to pass through this filter.

<!-- All types of images may join the party -->
<input type="file" accept="image/*"> 


For those who believe in second chances: Enhancing file upload with JavaScript

You may also employ JavaScript to perform additional client-side validation for better security. It's like a bouncer who double-checks the ID at the club door.

Server-side validation: The key to secure file uploads

The boss level check: Robust server-side validation

While filters and JavaScript provide a level of security, the true hero is server-side validation. In PHP, you might use getimagesize() or finfo_file() for deeper file validation.

// PHP doesn't always trust HTML and JS, thus, extra check! 
if(isset($_FILES['file']) && getimagesize($_FILES['file']['tmp_name'])) {
    // Process the image file
}


Dealing with varying browser compatibilities and mobile support

Understanding your audience: Browser compatibility

While coding, ensure your solution works across as many browsers as it can, especially considering some older ones. Consult Can I Use for updated browser compatibility details.

Mobile support: Catering to a mobile-first world

Given the ubiquitous use of mobile devices, remember to test your feature across mobile platforms. Browser support for accept attribute varies across them.

Calling in the cavalry: Checking the compatibility of accept attribute

Note that Internet Explorer 10+, Chrome, Firefox, Safari 6+, and Opera 15+ all support the accept attribute.

Server-end checks: Guarding the fort

Close the loophole by ensuring robust server-side checks. Use PHP's isset() to safeguard before processing the file.