Limit file format when using ``?

Adding MIME-types for broader compatibility

In addition to file extensions, incorporating the MIME-types in the accept attribute enhances cross-browser functionality:

<input type="file" accept="image/png, image/jpeg">


For better compatibility, do not hesitate to include both MIME-types and file extensions:

<input type="file" accept=".png, .jpeg, image/png, image/jpeg">


Turbocharging client-side validation

Improve the user experience with client-side JavaScript validation. While not iron-clad security, it gives the user instant feedback on file type errors.

Catch file selection with the onchange event

Assign an onchange event to your file input — validating file extensions on the fly. We like our files fly-free, but the right kind.

document.getElementById('fileInput').onchange = function(e) {
    // We're picky. Only .png and .jpeg are invited
    if(!e.target.files[0].name.match(/\.(png|jpeg)$/)) {
        alert('Only .png and .jpeg formats are allowed!');
        e.target.value = ''; // We don't tolerate rule breakers
    }
};


Validate files on form submission using onsubmit

On the verge of form submission, do a final sweep of chosen files using onsubmit:

document.getElementById('myForm').onsubmit = function(e) {
    // Last chance! Any .png or .jpeg around?
    var files = document.getElementById('fileInput').files;
    if (!files.length || !files[0].name.match(/\.(png|jpeg)$/)) {
        alert('Please attach a .png or .jpeg file!');
        e.preventDefault(); // No party for rule breakers.
    }
};


Never forget, client-side checks are great for usability, but server-side validation is non-negotiable for security.

Mitigating browser inconsistencies

Dealing with the subtleties of the accept attribute

The accept attribute is a great tool, but beware of variances in browser support and interpretation:

• For some, the accept attribute filters the file picker, yet users can still select all files.
• Others might not interpret MIME-types correctly, focusing solely on extensions.

Ensuring a seamless user experience across browsers

For a consistent, versatile solution, use a combination of MIME-types and file extensions. Execute wide-ranging browser testing to ensure a smooth user interaction.

Reinforcing security with server-side validation

Server-side validation isn't optional. Make sure you're inspecting both MIME-type and the binary signature — resist malicious uploads.

Delving into HTML5 File API

Enter the HTML5 File API: now we can inspect actual file content on the client-side. Welcome to an extra layer in our validation fortress.

Staying informed: Upload security practices

Knowledge goes beyond code. Stay informed on file upload security best practices to preemptively block common vulnerabilities.