File Upload Accept Compatibility Issues
Recently received a user-submitted issue where certificate file uploads always failed when selecting files in Ubuntu Firefox. After investigation, it was found to be a compatibility issue, so I’m summarizing it here.
input-accept
First, let me explain the meaning of this attribute setting. The accept attribute is used to limit file upload types. The value of accept can be a file extension, such as .jpg, or a mime type, such as image/jpeg. The HTML standard also supports comma-separated multiple file types.
Problem Code
<input type="file" accept="application/x-x509-ca-cert" />
Phenomenon: In Ubuntu Firefox, unable to select certificate text files with .cer or .crt extensions. The current project mostly uses encapsulated UI components, meaning upload restrictions at the JS level. Switching to native implementation shows the same problem.
Compatibility Issues
Based on the problem code, I retested in several environments with the following results, which also reproduced the user’s issue.
- Mac Chrome v99.0.4844.74: Normal
- Mac Firefox v97.0.2: Normal
- Ubuntu Firefox v93.0: Error
- Ubuntu Chrome v99.0.4844.82: Error
Root Cause Analysis
Cert files are recognized as MIME type application/pkix-cert on Ubuntu, while on Mac they are application/x-x509-ca-cert.
Solution
Changed to file extension-based restriction: <input type="file" accept=".cer,.crt" />. Retested and found it works fine.
Final Thoughts
For MIME-based type restrictions on text files, it’s recommended to prioritize file extension approach.
