Rule proposal: `valid-mime-type`

[RND332]

Description

Validates that accept value on JSX <input type="file" /> is correct Unique file type specifier

• non-static accept expressions
• invalid MIME tokens
• invalid file extensions
• invalid wildcard tokens
• empty entries such as trailing commas
• canonical casing, duplicate entries, and spacing normalization issues

Examples

// ❌
function InputWrapper({ allowedTypes }: { allowedTypes: string }) {
   return <input type="file" accept={allowedTypes} />
}

// ❌
<input type="file" accept="image/jpg" />

// ❌
<input type="file" accept="png" />

// ❌
<input type="file" accept="not-real-mime-type/*" />

// ❌
<input type="file" accept="*/not-real-mime-subtype" />

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

// ✅
<input type="file" accept="image/png" />

// ❌
<input type="file" accept="IMAGE/PNG,.PNG, image/png" />

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

// ❌
<input type="file" accept="TEXT/*" />

// ✅
<input type="file" accept="text/*" />

Proposed rule name

valid-mime-type

Additional Info

Motivation: I was refactoring some pages in nextjs app when i found code like this:

export const acceptsMap = {
    'image': ['image/png', image/jpg]
    'text': [...]
    ...
}

After some research i found out 2 rules was made up (maybe copilot, or other LLM), 1 rule with typo. I tried to find some linting/typing solution for this but was unsuccessful, so this is why i wrote this proposal.
Fun fact: I initially tried to validate the MIME type using TypeScript, but I was limited by the technologies available to me (types cannot be infinitely recursive)

[RND332]

update: added motivation